fix(AreaChart|BarChar|LineChart): Use value axis (typically y) property name/accessor for tooltip label if defined as string (ex. <AreaChart x="date" y="visitors"> will use visitors instead of value) (#523)

Author: techniq

.changeset/better-pets-divide.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(AreaChart|BarChar|LineChart): Use value axis (typically y) property name/accessor for tooltip label if defined as string (ex. `<AreaChart x="date" y="visitors">` will use `visitors` instead of `value`)

packages/layerchart/src/lib/components/charts/AreaChart.svelte

@@ -135,7 +135,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: y, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof y === 'string' ? y : 'value',
+            value: y,
+            color: 'var(--color-primary)',
+          },
+        ]
       : seriesProp
   );
 

packages/layerchart/src/lib/components/charts/BarChart.svelte

@@ -159,6 +159,14 @@
       ? [
           {
             key: 'default',
+            label:
+              orientation === 'vertical'
+                ? typeof yProp === 'string'
+                  ? yProp
+                  : 'value'
+                : typeof xProp === 'string'
+                  ? xProp
+                  : 'value',
             value: orientation === 'vertical' ? yProp : xProp,
           },
         ]

packages/layerchart/src/lib/components/charts/LineChart.svelte

@@ -141,7 +141,14 @@
 
   const series = $derived(
     seriesProp === undefined
-      ? [{ key: 'default', value: yProp, color: 'var(--color-primary)' }]
+      ? [
+          {
+            key: 'default',
+            label: typeof yProp === 'string' ? yProp : 'value',
+            value: yProp,
+            color: 'var(--color-primary)',
+          },
+        ]
       : seriesProp
   );
   const seriesState = new SeriesState(() => series);

packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte

@@ -42,6 +42,14 @@
       };
     })
   );
+  const dataVisits = $derived(
+    dateSeriesData.map((d) => {
+      return {
+        ...d,
+        visits: d.value,
+      };
+    })
+  );
 
   const now = new Date();
   const denseDateSeriesData = randomWalk({ count: 1000 }).map((value, i) => ({
@@ -173,6 +181,14 @@
   </div>
 </Preview>
 
+<h2>Default series label</h2>
+
+<Preview data={dataVisits}>
+  <div class="h-[300px] p-4 border rounded-sm">
+    <AreaChart data={dataVisits} x="date" y="visits" {renderContext} {debug} />
+  </div>
+</Preview>
+
 <h2>Gradient</h2>
 <Preview data={dateSeriesData}>
   <div class="h-[300px] p-4 border rounded-sm">