Update bar highlight examples to only fill-gray when chart is hovered

techniq · Oct 13, 2023 · ed04294 · ed04294 · vercel · Oct 13, 2023
1 parent c93f8e1
commit ed04294
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/routes/docs/examples/Bars/+page.svelte b/src/routes/docs/examples/Bars/+page.svelte
@@ -147,7 +147,7 @@
 <h2>with Tooltip and Bar Highlight</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded group">
     <Chart
       {data}
       x="value"
@@ -161,7 +161,11 @@
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-gray-300" />
+        <Bars
+          radius={4}
+          strokeWidth={1}
+          class="fill-accent-500 group-hover:fill-gray-300 transition-colors"
+        />
         <Highlight area bar={{ class: 'fill-accent-500', strokeWidth: 1, radius: 4 }} />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>

diff --git a/src/routes/docs/examples/Columns/+page.svelte b/src/routes/docs/examples/Columns/+page.svelte
@@ -148,7 +148,7 @@
 <h2>with Tooltip and Bar Highlight</h2>
 
 <Preview>
-  <div class="h-[300px] p-4 border rounded">
+  <div class="h-[300px] p-4 border rounded group">
     <Chart
       {data}
       x="date"
@@ -162,8 +162,12 @@
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
-        <Bars radius={4} strokeWidth={1} class="fill-gray-300" />
-        <Highlight area bar={{class: "fill-accent-500", strokeWidth: 1, radius: 4}} />
+        <Bars
+          radius={4}
+          strokeWidth={1}
+          class="fill-accent-500 group-hover:fill-gray-300 transition-colors"
+        />
+        <Highlight area bar={{ class: 'fill-accent-500', strokeWidth: 1, radius: 4 }} />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
         <TooltipItem label="value" value={data.value} />