docs: Add curve examples for AreaChart and LineChart

techniq · Nov 13, 2024 · 88e7b4a · 88e7b4a
1 parent fc88134
commit 88e7b4a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 1 deletion.
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -122,6 +122,19 @@
   </div>
 </Preview>
 
+<h2>Curve</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      props={{ area: { curve: curveCatmullRom } }}
+    />
+  </div>
+</Preview>
+
 <h2>Series</h2>
 
 <Preview data={multiSeriesData}>

diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -10,7 +10,7 @@
     Tooltip,
   } from 'layerchart';
   import { scaleBand, scaleSequential } from 'd3-scale';
-  import { curveLinearClosed } from 'd3-shape';
+  import { curveCatmullRom, curveLinearClosed } from 'd3-shape';
   import { extent, flatGroup, ticks } from 'd3-array';
   import { PeriodType } from 'svelte-ux';
   import { format } from '@layerstack/utils';
@@ -86,6 +86,19 @@
   </div>
 </Preview>
 
+<h2>Curve</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      props={{ spline: { curve: curveCatmullRom } }}
+    />
+  </div>
+</Preview>
+
 <h2>Series</h2>
 
 <Preview data={multiSeriesData}>