From c6113135cd9abd6242929b5ee856f143d9f0d9fb Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 4 Dec 2024 11:58:03 -0500
Subject: [PATCH] docs(Area): Add example using a gradient for the line/stroke

---
 .../routes/docs/examples/Area/+page.svelte    | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index 27c4b8408..863d0949a 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -212,6 +212,36 @@
   </div>
 </Preview>
 
+<h2>Gradient (separate stroke)</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={dateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <LinearGradient class="from-secondary/0 to-secondary" let:url={strokeUrl}>
+          <LinearGradient class="from-primary/50 to-primary/0" vertical let:url={fillUrl}>
+            <Area line={{ stroke: strokeUrl, class: 'stroke-2' }} fill={fillUrl} />
+          </LinearGradient>
+        </LinearGradient>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>Multiple series</h2>
 
 <Preview data={multiSeriesFlatData}>