diff --git a/src/components/charts/CdfChart__Base.re b/src/components/charts/CdfChart__Base.re
index ffcaf2f0..96fd0f7c 100644
--- a/src/components/charts/CdfChart__Base.re
+++ b/src/components/charts/CdfChart__Base.re
@@ -1,11 +1,19 @@
 [@bs.module "./cdfChartReact.js"]
 external cdfChart: ReasonReact.reactClass = "default";
 
-type primaryDistribution = {
-  .
-  "xs": array(float),
-  "ys": array(float),
-};
+type primaryDistribution =
+  option({
+    .
+    "xs": array(float),
+    "ys": array(float),
+  });
+
+type discrete =
+  option({
+    .
+    "xs": array(float),
+    "ys": array(float),
+  });
 
 [@react.component]
 let make =
@@ -17,6 +25,7 @@ let make =
       ~minX=?,
       ~onHover=(f: float) => (),
       ~primaryDistribution=?,
+      ~discrete=?,
       ~scale=?,
       ~showDistributionLines=?,
       ~showVerticalLine=?,
@@ -35,6 +44,7 @@ let make =
         ~minX?,
         ~onHover,
         ~primaryDistribution?,
+        ~discrete?,
         ~scale?,
         ~showDistributionLines?,
         ~showVerticalLine?,
diff --git a/src/components/charts/CdfChart__Plain.re b/src/components/charts/CdfChart__Plain.re
index f444d595..53bdde40 100644
--- a/src/components/charts/CdfChart__Plain.re
+++ b/src/components/charts/CdfChart__Plain.re
@@ -27,7 +27,8 @@ module Styles = {
 let make =
     (
       ~color=`hex("111"),
-      ~data,
+      ~primaryDistribution=?,
+      ~discrete=?,
       ~height=200,
       ~maxX=?,
       ~minX=?,
@@ -45,7 +46,10 @@ let make =
       marginBottom=50
       marginTop=0
       onHover
-      primaryDistribution={data |> Shape.XYShape.toJs}
+      primaryDistribution={
+        primaryDistribution |> E.O.fmap(pd => pd |> Shape.XYShape.toJs)
+      }
+      discrete={discrete |> E.O.fmap(d => d |> Shape.Discrete.toJs)}
       showDistributionLines=false
       showVerticalLine=false
     />
diff --git a/src/components/charts/GenericDistributionChart.re b/src/components/charts/GenericDistributionChart.re
index c21a7e4d..5c11cea9 100644
--- a/src/components/charts/GenericDistributionChart.re
+++ b/src/components/charts/GenericDistributionChart.re
@@ -7,11 +7,12 @@ module Mixed = {
       React.useMemo1(
         () =>
           <CdfChart__Plain
-            data={
+            primaryDistribution={
               data.continuous
               |> Shape.Continuous.normalizePdf
               |> E.O.toExt("")
             }
+            discrete={data.discrete}
             color={`hex("333")}
             timeScale
             onHover={r => setX(_ => r)}
@@ -70,7 +71,12 @@ module Cont = {
   let make = (~continuous, ~onHover, ~timeScale) => {
     let chart =
       React.useMemo1(
-        () => <CdfChart__Plain data=continuous color={`hex("333")} onHover />,
+        () =>
+          <CdfChart__Plain
+            primaryDistribution=continuous
+            color={`hex("333")}
+            onHover
+          />,
         [|continuous|],
       );
     chart;
diff --git a/src/components/charts/cdfChartReact.js b/src/components/charts/cdfChartReact.js
index e2c48952..20d41861 100644
--- a/src/components/charts/cdfChartReact.js
+++ b/src/components/charts/cdfChartReact.js
@@ -48,7 +48,10 @@ function CdfChartReact(props) {
       .verticalLine(props.verticalLine)
       .showVerticalLine(props.showVerticalLine)
       .container(containerRef.current)
-      .data({ primary: props.primaryDistribution })
+      .data({
+        primary: props.primaryDistribution,
+        discrete: props.discrete,
+      })
       .scale(scale)
       .timeScale(props.timeScale)
       .render();