layerchart 2.0.0-next.55 → 2.0.0-next.56

package/dist/components/Spline.svelte

@@ -95,12 +95,30 @@
   const ctx = getChartContext();
   const geo = getGeoContext();
 
-  let { data, x, y, seriesKey, defined, curve, stroke, fill, opacity, motion, ...restProps }: SplineProps = $props();
+  let {
+    data,
+    x,
+    y,
+    seriesKey,
+    defined,
+    curve,
+    stroke,
+    fill,
+    opacity,
+    motion,
+    ...restProps
+  }: SplineProps = $props();
 
   ctx.registerComponent({
     name: 'Spline',
     kind: 'mark',
-    markInfo: () => ({ data, x, y, seriesKey, color: typeof stroke === 'string' ? stroke : undefined }),
+    markInfo: () => ({
+      data,
+      x,
+      y,
+      seriesKey,
+      color: typeof stroke === 'string' ? stroke : undefined,
+    }),
   });
 
   function getScaleValue(
@@ -267,8 +285,8 @@
 
   const seriesOpacity = $derived(
     series?.key == null ||
-    ctx.series.visibleSeries.length <= 1 ||
-    ctx.series.isHighlighted(series.key, true)
+      ctx.series.visibleSeries.length <= 1 ||
+      ctx.series.isHighlighted(series.key, true)
       ? 1
       : 0.1
   );

package/dist/components/Text.svelte

@@ -686,7 +686,14 @@
       if (segments) {
         let xOffset = baseX;
         for (const segment of segments) {
-          const segStyles = getTextStyles(undefined, undefined, undefined, undefined, undefined, segment.class);
+          const segStyles = getTextStyles(
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+            segment.class
+          );
           const text = String(segment.value);
           // Set font before rendering and measuring so width is accurate
           const segComputedStyles = getComputedStyles(ctx.canvas, segStyles);
@@ -838,10 +845,7 @@
         >
           {#if segments}
             {#each segments as segment, index (index)}
-              <tspan
-                dy={index === 0 ? startDy : 0}
-                class={['lc-text-tspan', segment.class]}
-              >
+              <tspan dy={index === 0 ? startDy : 0} class={['lc-text-tspan', segment.class]}>
                 {segment.value}
               </tspan>
             {/each}

package/dist/components/Trail.svelte

@@ -180,9 +180,15 @@
       .map((d: any) => ({
         x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
         y: getScaleValue(d, ctx.yScale, yAccessor) + yOffset,
-        r: resolvedR != null
-          ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
-          : 4,
+        r:
+          resolvedR != null
+            ? resolveDataProp(
+                resolvedR,
+                d,
+                ctx.rScale,
+                typeof resolvedR === 'number' ? resolvedR : 4
+              )
+            : 4,
       }));
 
     return computeTrailPath(points, { curve, cap, tension, resolution });
@@ -206,9 +212,15 @@
         .map((d: any) => ({
           x: getScaleValue(d, ctx.xScale, xAccessor) + xOffset,
           y: baseline,
-          r: resolvedR != null
-            ? resolveDataProp(resolvedR, d, ctx.rScale, typeof resolvedR === 'number' ? resolvedR : 4)
-            : 4,
+          r:
+            resolvedR != null
+              ? resolveDataProp(
+                  resolvedR,
+                  d,
+                  ctx.rScale,
+                  typeof resolvedR === 'number' ? resolvedR : 4
+                )
+              : 4,
         }));
 
       return computeTrailPath(points, { curve, cap, tension, resolution });
@@ -236,7 +248,7 @@
 <Path
   pathData={isTweened ? tweenState.current : trailPath}
   {fill}
-  fillOpacity={fillOpacity}
+  {fillOpacity}
   {opacity}
   stroke="none"
   class={cls('lc-trail', className)}

package/dist/components/Vector.svelte

@@ -127,10 +127,22 @@
   import { getGeoContext } from '../contexts/geo.js';
   import { getLayerContext } from '../contexts/layer.js';
   import { createMotion, createDataMotionMap, type MotionProp } from '../utils/motion.svelte.js';
-  import { hasAnyDataProp, resolveDataProp, extractRawDataValue, resolveGeoDataPair, resolveStyleProp, resolveColorProp } from '../utils/dataProp.js';
+  import {
+    hasAnyDataProp,
+    resolveDataProp,
+    extractRawDataValue,
+    resolveGeoDataPair,
+    resolveStyleProp,
+    resolveColorProp,
+  } from '../utils/dataProp.js';
   import { chartDataArray } from '../utils/common.js';
   import { cls } from '@layerstack/tailwind';
-  import { vectorArrowPath, vectorArrowFilledPath, vectorSpikePath, transformVectorPath } from '../utils/path.js';
+  import {
+    vectorArrowPath,
+    vectorArrowFilledPath,
+    vectorSpikePath,
+    transformVectorPath,
+  } from '../utils/path.js';
   import Path from './Path.svelte';
 
   let {
@@ -169,11 +181,11 @@
   // Per-item style mode: when any style prop is a function, we must render individual paths
   const hasPerItemStyles = $derived(
     typeof fill === 'function' ||
-    typeof stroke === 'function' ||
-    typeof fillOpacity === 'function' ||
-    typeof strokeWidth === 'function' ||
-    typeof opacity === 'function' ||
-    typeof className === 'function'
+      typeof stroke === 'function' ||
+      typeof fillOpacity === 'function' ||
+      typeof strokeWidth === 'function' ||
+      typeof opacity === 'function' ||
+      typeof className === 'function'
   );
 
   // Contexts
@@ -182,9 +194,7 @@
   const layerCtx = getLayerContext();
 
   // Data to iterate over in data mode
-  const resolvedData: any[] = $derived(
-    dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []
-  );
+  const resolvedData: any[] = $derived(dataMode ? (dataProp ?? chartDataArray(chartCtx.data)) : []);
 
   // Resolve a single data item to pixel coordinates and values
   function resolveVector(d: any) {
@@ -200,8 +210,14 @@
     return {
       x: resolvedX,
       y: resolvedY,
-      length: resolveDataProp(lengthProp, d, chartCtx.rScale, typeof lengthProp === 'number' ? lengthProp : 12),
-      rotate: typeof rotateProp === 'number' ? rotateProp : (extractRawDataValue(rotateProp, d) ?? 0),
+      length: resolveDataProp(
+        lengthProp,
+        d,
+        chartCtx.rScale,
+        typeof lengthProp === 'number' ? lengthProp : 12
+      ),
+      rotate:
+        typeof rotateProp === 'number' ? rotateProp : (extractRawDataValue(rotateProp, d) ?? 0),
     };
   }
 
@@ -289,7 +305,11 @@
 
   const motionX = createMotion(initialX, () => (typeof x === 'number' ? x : 0), motion);
   const motionY = createMotion(initialY, () => (typeof y === 'number' ? y : 0), motion);
-  const motionLength = createMotion(initialLength, () => (typeof lengthProp === 'number' ? lengthProp : 12), motion);
+  const motionLength = createMotion(
+    initialLength,
+    () => (typeof lengthProp === 'number' ? lengthProp : 12),
+    motion
+  );
 
   const pixelRotate = $derived(typeof rotateProp === 'number' ? rotateProp : 0);
 
@@ -346,7 +366,10 @@
     stroke={stroke as string}
     strokeWidth={strokeWidth as number}
     opacity={opacity as number}
-    class="lc-vector {isFilled ? 'lc-vector-filled' : 'lc-vector-stroked'} {typeof className === 'string' ? className : ''}"
+    class="lc-vector {isFilled ? 'lc-vector-filled' : 'lc-vector-stroked'} {typeof className ===
+    'string'
+      ? className
+      : ''}"
   />
 {/if}
 

package/dist/components/Violin.svelte

@@ -148,8 +148,7 @@
     const ext: [number, number] = [sorted[0], sorted[sorted.length - 1]];
 
     // Silverman's rule of thumb for bandwidth
-    const bw =
-      bandwidthProp ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
+    const bw = bandwidthProp ?? 1.06 * (deviation(sorted) ?? 1) * Math.pow(sorted.length, -1 / 5);
 
     const kernelFn = epanechnikov(bw);
 

package/dist/components/charts/ArcChart.svelte

@@ -240,9 +240,7 @@
   );
 
   // Compute series colors locally to avoid derived_references_self cycle through context.series.allSeriesColors
-  const allSeriesColors = $derived(
-    series.map((s) => s.color).filter((c) => c != null) as string[]
-  );
+  const allSeriesColors = $derived(series.map((s) => s.color).filter((c) => c != null) as string[]);
 
   // Custom tickFormat for ArcChart legends - uses data labels instead of series labels
   const legendTickFormat = (tick: any) => {
@@ -416,8 +414,13 @@
               value={valueAccessor(data)}
               color={snippetProps.context.cScale?.(snippetProps.context.c(data))}
               {format}
-              onpointerenter={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = keyAccessor(data); }}
-              onpointerleave={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = null; }}
+              onpointerenter={() => {
+                if (snippetProps.context)
+                  snippetProps.context.series.highlightKey = keyAccessor(data);
+              }}
+              onpointerleave={() => {
+                if (snippetProps.context) snippetProps.context.series.highlightKey = null;
+              }}
               {...props.tooltip?.item}
             />
           </Tooltip.List>

package/dist/components/charts/AreaChart.svelte

@@ -108,7 +108,12 @@
         ...(typeof tooltipContext === 'object' ? tooltipContext : null),
       }}
   brush={brush
-    ? { axis: 'x', zoomOnBrush: true, ...(typeof brush === 'object' ? brush : null), ...props.brush }
+    ? {
+        axis: 'x',
+        zoomOnBrush: true,
+        ...(typeof brush === 'object' ? brush : null),
+        ...props.brush,
+      }
     : false}
   {series}
   {seriesLayout}

package/dist/components/charts/BarChart.svelte

@@ -184,7 +184,9 @@
           x1={valueAxis === 'y' && isGroupSeries ? (d) => s.value ?? s.key : undefined}
           y1={valueAxis === 'x' && isGroupSeries ? (d) => s.value ?? s.key : undefined}
           rounded={context.series.divergingEdgeKeys
-            ? context.series.divergingEdgeKeys.has(s.key) ? 'edge' : 'none'
+            ? context.series.divergingEdgeKeys.has(s.key)
+              ? 'edge'
+              : 'none'
             : context.series.isStacked && i !== context.series.visibleSeries.length - 1
               ? 'none'
               : Array.isArray(xProp) || Array.isArray(yProp)

package/dist/components/charts/LineChart.svelte

@@ -133,7 +133,12 @@
         ...(typeof tooltipContext === 'object' ? tooltipContext : null),
       }}
   brush={brush
-    ? { axis: 'x', zoomOnBrush: true, ...(typeof brush === 'object' ? brush : null), ...props.brush }
+    ? {
+        axis: 'x',
+        zoomOnBrush: true,
+        ...(typeof brush === 'object' ? brush : null),
+        ...props.brush,
+      }
     : false}
   {series}
   highlight={highlightWithPointClick as any}

package/dist/components/charts/PieChart.svelte

@@ -308,7 +308,9 @@
       startAngle: arc.startAngle,
       endAngle: arc.endAngle,
       outerRadius:
-        (context?.series.visibleSeries.length ?? 0) > 1 ? seriesIndex * (outerRadius ?? 0) : outerRadius,
+        (context?.series.visibleSeries.length ?? 0) > 1
+          ? seriesIndex * (outerRadius ?? 0)
+          : outerRadius,
       innerRadius,
       cornerRadius,
       padAngle,
@@ -464,8 +466,13 @@
               value={valueAccessor(data)}
               color={snippetProps.context.cScale?.(snippetProps.context.c(data))}
               {format}
-              onpointerenter={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = keyAccessor(data); }}
-              onpointerleave={() => { if (snippetProps.context) snippetProps.context.series.highlightKey = null; }}
+              onpointerenter={() => {
+                if (snippetProps.context)
+                  snippetProps.context.series.highlightKey = keyAccessor(data);
+              }}
+              onpointerleave={() => {
+                if (snippetProps.context) snippetProps.context.series.highlightKey = null;
+              }}
               {...props.tooltip?.item}
             />
           </Tooltip.List>

package/dist/components/tooltip/Tooltip.svelte

@@ -377,10 +377,7 @@
           ) {
             rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
           }
-          if (
-            (xAlign === 'end' || xAlign === 'center') &&
-            containerRect.left + rect.left < 0
-          ) {
+          if ((xAlign === 'end' || xAlign === 'center') && containerRect.left + rect.left < 0) {
             rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
           }
         }
@@ -393,10 +390,7 @@
           ) {
             rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
           }
-          if (
-            (yAlign === 'end' || yAlign === 'center') &&
-            containerRect.top + rect.top < 0
-          ) {
+          if ((yAlign === 'end' || yAlign === 'center') && containerRect.top + rect.top < 0) {
             rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
           }
         }

package/dist/contexts/chart.d.ts

@@ -1,6 +1,6 @@
 import type { ChartState } from '../states/chart.svelte.js';
 import type { AnyScale } from '../utils/scales.svelte.js';
 export type { ChartState };
-export type { NodeKind, ComponentNode, RegisterComponentOptions } from '../states/chart.svelte.js';
+export type { NodeKind, ComponentNode, RegisterComponentOptions, } from '../states/chart.svelte.js';
 export declare function getChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(): ChartState<T, XScale, YScale>;
 export declare function setChartContext<T, XScale extends AnyScale = AnyScale, YScale extends AnyScale = AnyScale>(context: ChartState<T, XScale, YScale>): ChartState<T, XScale, YScale>;

package/dist/contexts/chart.js

@@ -5,7 +5,9 @@ const _ChartContext = new Context('ChartContext');
  * Provides safe defaults to prevent runtime errors.
  */
 const fallbackContext = {
-    registerMark: () => () => { },
+    registerMark: () => () => {
+        /* no-op */
+    },
     registerComponent: (_options) => ({
         id: Symbol('noop'),
         kind: 'mark',

package/dist/server/TestBarChart.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
-	import { scaleBand } from 'd3-scale';
-	import ServerChart from './ServerChart.svelte';
-	import type { CaptureTarget } from './captureStore.js';
-	import Bars from '../components/Bars.svelte';
+  import { scaleBand } from 'd3-scale';
+  import ServerChart from './ServerChart.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+  import Bars from '../components/Bars.svelte';
 
-	let {
-		data,
-		width,
-		height,
-		capture,
-		onCapture
-	}: {
-		data: { category: string; value: number }[];
-		width: number;
-		height: number;
-		capture?: CaptureTarget;
-		onCapture?: (data: CaptureTarget) => void;
-	} = $props();
+  let {
+    data,
+    width,
+    height,
+    capture,
+    onCapture,
+  }: {
+    data: { category: string; value: number }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
 </script>
 
 <ServerChart
-	{capture}
-	{onCapture}
-	{width}
-	{height}
-	{data}
-	x="category"
-	xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
-	y="value"
-	yDomain={[0, null]}
-	padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
+  {capture}
+  {onCapture}
+  {width}
+  {height}
+  {data}
+  x="category"
+  xScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
+  y="value"
+  yDomain={[0, null]}
+  padding={{ top: 20, right: 20, bottom: 30, left: 40 }}
 >
-	<Bars fill="rgb(59, 130, 246)" radius={4} />
+  <Bars fill="rgb(59, 130, 246)" radius={4} />
 </ServerChart>

package/dist/server/TestLineChart.svelte

@@ -1,35 +1,35 @@
 <script lang="ts">
-	import ServerChart from './ServerChart.svelte';
-	import type { CaptureTarget } from './captureStore.js';
-	import Area from '../components/Area.svelte';
-	import Spline from '../components/Spline.svelte';
+  import ServerChart from './ServerChart.svelte';
+  import type { CaptureTarget } from './captureStore.js';
+  import Area from '../components/Area.svelte';
+  import Spline from '../components/Spline.svelte';
 
-	let {
-		data,
-		width,
-		height,
-		capture,
-		onCapture
-	}: {
-		data: { date: number; value: number }[];
-		width: number;
-		height: number;
-		capture?: CaptureTarget;
-		onCapture?: (data: CaptureTarget) => void;
-	} = $props();
+  let {
+    data,
+    width,
+    height,
+    capture,
+    onCapture,
+  }: {
+    data: { date: number; value: number }[];
+    width: number;
+    height: number;
+    capture?: CaptureTarget;
+    onCapture?: (data: CaptureTarget) => void;
+  } = $props();
 </script>
 
 <ServerChart
-	{capture}
-	{onCapture}
-	{width}
-	{height}
-	{data}
-	x="date"
-	y="value"
-	yDomain={[0, null]}
-	padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
+  {capture}
+  {onCapture}
+  {width}
+  {height}
+  {data}
+  x="date"
+  y="value"
+  yDomain={[0, null]}
+  padding={{ top: 20, right: 20, bottom: 20, left: 20 }}
 >
-	<Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
-	<Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
+  <Area fill="rgba(59, 130, 246, 0.15)" stroke="none" />
+  <Spline stroke="rgb(59, 130, 246)" strokeWidth={2} />
 </ServerChart>

package/dist/server/index.js

@@ -64,7 +64,7 @@ export function renderChart(component, options) {
     const captureTarget = {};
     // SSR render to build the component tree and capture chart state
     const rendered = render(component, {
-        props: { ...props, width, height, capture: captureTarget }
+        props: { ...props, width, height, capture: captureTarget },
     });
     // Force the SSR render to fully flush
     void rendered.body;

package/dist/states/brush.svelte.js

@@ -6,9 +6,7 @@ import { add } from '../utils/math.js';
  * For continuous scales, returns the domain unchanged.
  */
 export function expandBandBrushDomain(brushDomain, baseDomain) {
-    if (brushDomain[0] == null ||
-        brushDomain[1] == null ||
-        typeof brushDomain[0] !== 'string') {
+    if (brushDomain[0] == null || brushDomain[1] == null || typeof brushDomain[0] !== 'string') {
         return brushDomain;
     }
     const startIdx = baseDomain.indexOf(brushDomain[0]);
@@ -109,8 +107,7 @@ export class BrushState {
         // Determine active state from current values
         const hasX = this.x[0] != null && this.x[1] != null;
         const hasY = this.y[0] != null && this.y[1] != null;
-        this.active =
-            this.axis === 'x' ? hasX : this.axis === 'y' ? hasY : hasX || hasY;
+        this.active = this.axis === 'x' ? hasX : this.axis === 'y' ? hasY : hasX || hasY;
     }
     /** Set brush to a new range, clamped to domain bounds */
     setRange(startValue, currentValue) {
@@ -177,12 +174,16 @@ export class BrushState {
         const yDomain = this.ctx?.baseYScale.domain() ?? [];
         const xCat = isCategoricalDomain(xDomain);
         const yCat = isCategoricalDomain(yDomain);
-        const clampX = (v) => xCat ? clampByIndex(v, this.xDomainMin, this.xDomainMax, xDomain) : clamp(v, this.xDomainMin, this.xDomainMax);
-        const clampY = (v) => yCat ? clampByIndex(v, this.yDomainMin, this.yDomainMax, yDomain) : clamp(v, this.yDomainMin, this.yDomainMax);
-        const ltX = (a, b) => xCat ? xDomain.indexOf(a) < xDomain.indexOf(b) : a < +b;
-        const gtX = (a, b) => xCat ? xDomain.indexOf(a) > xDomain.indexOf(b) : a > +b;
-        const ltY = (a, b) => yCat ? yDomain.indexOf(a) < yDomain.indexOf(b) : a < +b;
-        const gtY = (a, b) => yCat ? yDomain.indexOf(a) > yDomain.indexOf(b) : a > +b;
+        const clampX = (v) => xCat
+            ? clampByIndex(v, this.xDomainMin, this.xDomainMax, xDomain)
+            : clamp(v, this.xDomainMin, this.xDomainMax);
+        const clampY = (v) => yCat
+            ? clampByIndex(v, this.yDomainMin, this.yDomainMax, yDomain)
+            : clamp(v, this.yDomainMin, this.yDomainMax);
+        const ltX = (a, b) => (xCat ? xDomain.indexOf(a) < xDomain.indexOf(b) : a < +b);
+        const gtX = (a, b) => (xCat ? xDomain.indexOf(a) > xDomain.indexOf(b) : a > +b);
+        const ltY = (a, b) => (yCat ? yDomain.indexOf(a) < yDomain.indexOf(b) : a < +b);
+        const gtY = (a, b) => (yCat ? yDomain.indexOf(a) > yDomain.indexOf(b) : a > +b);
         switch (edge) {
             case 'top':
                 this.y = [
@@ -218,10 +219,12 @@ export class BrushState {
         const newX = externalX ?? [null, null];
         const newY = externalY ?? [null, null];
         // Only write when values actually differ to avoid reactive loops
-        if (this.x[0]?.valueOf() !== newX[0]?.valueOf() || this.x[1]?.valueOf() !== newX[1]?.valueOf()) {
+        if (this.x[0]?.valueOf() !== newX[0]?.valueOf() ||
+            this.x[1]?.valueOf() !== newX[1]?.valueOf()) {
             this.x = newX;
         }
-        if (this.y[0]?.valueOf() !== newY[0]?.valueOf() || this.y[1]?.valueOf() !== newY[1]?.valueOf()) {
+        if (this.y[0]?.valueOf() !== newY[0]?.valueOf() ||
+            this.y[1]?.valueOf() !== newY[1]?.valueOf()) {
             this.y = newY;
         }
         const isXAxisActive = externalX != null &&

package/dist/states/chart.svelte.test.js

@@ -287,17 +287,23 @@ describe('ChartState mark registration', () => {
             flushSync();
             expect(state.seriesState.isDefaultSeries).toBe(false);
             expect(state.seriesState.series).toHaveLength(2);
-            expect(state.seriesState.series[0]).toMatchObject({ key: 'apples', color: 'red', value: 'apples' });
-            expect(state.seriesState.series[1]).toMatchObject({ key: 'bananas', color: 'yellow', value: 'bananas' });
+            expect(state.seriesState.series[0]).toMatchObject({
+                key: 'apples',
+                color: 'red',
+                value: 'apples',
+            });
+            expect(state.seriesState.series[1]).toMatchObject({
+                key: 'bananas',
+                color: 'yellow',
+                value: 'bananas',
+            });
         }
         finally {
             cleanup();
         }
     });
     it('should not generate implicit series when explicit series are provided', () => {
-        const data = [
-            { date: '2024-01', apples: 10, bananas: 15 },
-        ];
+        const data = [{ date: '2024-01', apples: 10, bananas: 15 }];
         const { state, cleanup } = createChartState({
             data,
             x: 'date',
@@ -611,8 +617,16 @@ describe('ChartState geo projection skips markInfo', () => {
             // seriesKey/color/label should still create implicit series for legends
             expect(state.seriesState.isDefaultSeries).toBe(false);
             expect(state.seriesState.series).toHaveLength(2);
-            expect(state.seriesState.series[0]).toMatchObject({ key: 'earthquakes', color: 'red', label: 'Earthquakes' });
-            expect(state.seriesState.series[1]).toMatchObject({ key: 'volcanos', color: 'orange', label: 'Volcanos' });
+            expect(state.seriesState.series[0]).toMatchObject({
+                key: 'earthquakes',
+                color: 'red',
+                label: 'Earthquakes',
+            });
+            expect(state.seriesState.series[1]).toMatchObject({
+                key: 'volcanos',
+                color: 'orange',
+                label: 'Volcanos',
+            });
             // But flatData should not include extra mark data
             expect(state.flatData).toHaveLength(3);
         }
@@ -861,9 +875,7 @@ describe('ChartState implicit x/y from marks (no x/y on Chart)', () => {
         }
     });
     it('should deduplicate repeated mark x keys into a single accessor', () => {
-        const data = [
-            { date: new Date(2024, 0, 1), value: 10 },
-        ];
+        const data = [{ date: new Date(2024, 0, 1), value: 10 }];
         const { state, cleanup } = createChartState({});
         try {
             // Two marks, same x='date' — should not create duplicate keys
@@ -878,9 +890,7 @@ describe('ChartState implicit x/y from marks (no x/y on Chart)', () => {
         }
     });
     it('should use explicit x/y from Chart props over mark-derived values', () => {
-        const data = [
-            { date: new Date(2024, 0, 1), value: 10 },
-        ];
+        const data = [{ date: new Date(2024, 0, 1), value: 10 }];
         const { state, cleanup } = createChartState({
             x: 'value', // explicit — should override 'date' from marks
             y: 'value',
@@ -1250,12 +1260,7 @@ describe('ChartState group layout auto-derives x1/y1', () => {
         { year: '2016', apples: 480, bananas: 240, cherries: 120, grapes: 50 },
         { year: '2017', apples: 960, bananas: 480, cherries: 240, grapes: 100 },
     ];
-    const series = [
-        { key: 'apples' },
-        { key: 'bananas' },
-        { key: 'cherries' },
-        { key: 'grapes' },
-    ];
+    const series = [{ key: 'apples' }, { key: 'bananas' }, { key: 'cherries' }, { key: 'grapes' }];
     it('should auto-derive x1Domain from series keys when seriesLayout=group and valueAxis=y', () => {
         const { state, cleanup } = createChartState({
             data: wideData,