Update chart examples for series context and transforms

docs/generated/releases/layerchart-2.3.0.md

@@ -0,0 +1,50 @@
+---
+title: "layerchart@2.3.0"
+tag: "layerchart@2.3.0"
+date: "2026-08-20T19:24:17Z"
+url: "https://github.com/techniq/layerchart/releases/tag/layerchart%402.3.0"
+draft: false
+prerelease: false
+author: "github-actions[bot]"
+---
+### Minor Changes
+
+- feat(ChartGroup): Add `<ChartGroup>` and `ChartGroupState` to synchronize the tooltip/highlight, brush selection, zoom domain, and series highlight/visibility across charts ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Chart): Add `fx` / `fy` faceting, drawing the chart once per distinct value into a grid of panels that share the position scales ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Chart): Add `seriesLayout="auto"` (default) with automatic stacking when applicable (ex. Area, Bars). Can still pass explicit `seriesLayout` (ex. `overlap`, `group`, `stack`) when needed ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Bar|Bars): Accept a per-row accessor for `fillOpacity`, `strokeWidth`, and `opacity`, matching `Rect` and `Circle` ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Spline|Area): Resolve `stroke`, `fill`, `opacity`, and `class` per line/area (and segment). A string naming a data property now resolves through the chart's color scale, like other primitives (ex. `Circle`) ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Chart): Default the color scale to the colors declared on `series`, so marks match their legend swatch ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Legend): Support ordinal `c` scale similar to `series` including highlight and filter capability. An ordinal scale now draws labelled swatches rather than a color ramp — pass `variant="ramp"` for the old appearance ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Tooltip): Add `tooltip.show({ point, value, data })` to control tooltip programmatically (buttons, keyboard events, etc.) ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat: New Brush component to manually position, useful for multiple / independent brushes (ex. parallel coordinates). Also includes new `brushable` attachment and `brushGesture` handler for even more granular control of `BrushState` ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(AnnotationPoint|AnnotationLine|AnnotationRange): Support `seriesKey` prop to associate an annotation with a series, positioning points and lines on its stacked segment ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Chart): Add `id` prop, applied to the root element and identifying the chart within a `ChartGroup` ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Rect): Support `ref` in html layers and forward `pointerdown` in canvas layers ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Spline|Area): Add `z` accessor to draw one line/area per distinct value, defaulting to `stroke` / `fill` / `c` ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Spline): Support `seriesKey` prop to follow that series' stacked top ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- feat(Chart): Add `transform.initialDomain` to open a chart zoomed to a range ([#901](https://github.com/techniq/layerchart/pull/901))
+
+### Patch Changes
+
+- fix(BrushContext): Fix clearing on double-clicking the selection (root select-all was immediately undoing) ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- fix(PieChart): Stop drawing a cartesian grid behind the arcs when using `series` ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- fix(Chart): Stack each `x1` sub-band separately, so grouped-and-stacked bars no longer share one running total ([#901](https://github.com/techniq/layerchart/pull/901))
+
+- fix(Chart): Apply `zoomToBrush()` when called before the chart mounts or when the scale clamps to `scaleExtent` ([#901](https://github.com/techniq/layerchart/pull/901))

docs/src/examples/catalog/Layer.json

@@ -2443,14 +2443,14 @@
       "component": "GeoProjection",
       "path": "/docs/components/GeoProjection/true-size-globe",
       "lineNumber": 421,
-      "line": "<Layer>"
+      "line": "<Layer ignoreTransform>"
     },
     {
       "example": "true-size-globe",
       "component": "GeoProjection",
       "path": "/docs/components/GeoProjection/true-size-globe",
       "lineNumber": 440,
-      "line": "<Layer>"
+      "line": "<Layer ignoreTransform>"
     },
     {
       "example": "globe",
@@ -4399,5 +4399,5 @@
       "line": "<Layer onpointermove={onPointerMove}>"
     }
   ],
-  "updatedAt": "2026-08-20T17:01:02.069Z"
+  "updatedAt": "2026-08-25T17:59:25.225Z"
 }

docs/src/examples/components/AreaChart/tooltip-fixed-with-hide-delay.svelte

@@ -25,22 +25,22 @@
 	padding={defaultChartPadding({ right: 10 })}
 	height={300}
 >
-	{#snippet tooltip({ context, setHighlightKey, series })}
+	{#snippet tooltip({ context })}
 		<Tooltip.Root x="data" y={context.height + 24} pointerEvents>
 			{#snippet children({ data })}
 				<Tooltip.Header>
 					{format(context.x(data), 'day')}
 				</Tooltip.Header>
 
 				<Tooltip.List>
-					{#each series as s}
+					{#each context.series.visibleSeries as s}
 						{@const valueAccessor = accessor(s.value ?? s.key)}
 						{@const value = valueAccessor(data)}
 						<Tooltip.Item
 							label={s.key}
 							color={s.color}
-							onpointerenter={() => setHighlightKey(s.key)}
-							onpointerleave={() => setHighlightKey(null)}
+							onpointerenter={() => (context.series.highlightKey = s.key)}
+							onpointerleave={() => (context.series.highlightKey = null)}
 						>
 							{format(value)}
 						</Tooltip.Item>

docs/src/examples/components/AreaChart/tooltip-locking.svelte

@@ -34,22 +34,22 @@
 	padding={defaultChartPadding({ right: 10 })}
 	height={300}
 >
-	{#snippet tooltip({ context, setHighlightKey, series })}
+	{#snippet tooltip({ context })}
 		<Tooltip.Root pointerEvents>
 			{#snippet children({ data })}
 				<Tooltip.Header>
 					{format(context.x(data), 'day')}
 				</Tooltip.Header>
 
 				<Tooltip.List>
-					{#each series as s}
+					{#each context.series.visibleSeries as s}
 						{@const valueAccessor = accessor(s.value ?? s.key)}
 						{@const value = Math.abs(valueAccessor(data))}
 						<Tooltip.Item
 							label={s.key}
 							color={s.color}
-							onpointerenter={() => setHighlightKey(s.key)}
-							onpointerleave={() => setHighlightKey(null)}
+							onpointerenter={() => (context.series.highlightKey = s.key)}
+							onpointerleave={() => (context.series.highlightKey = null)}
 						>
 							{format(value)}
 

docs/src/examples/components/BarChart/facet-stack-long-data.svelte

@@ -25,7 +25,6 @@
 	]}
 	legend
 	props={{
-		facetAxis: { format: 'none' },
 		yAxis: { format: 'metric' },
 		tooltip: { header: { format: 'none' } }
 	}}

docs/src/examples/components/BarChart/series-horizontal-diverging.svelte

@@ -52,12 +52,12 @@
 	]}
 	height={600}
 >
-	{#snippet tooltip({ context, series })}
+	{#snippet tooltip({ context })}
 		<Tooltip.Root>
 			{#snippet children({ data })}
 				<Tooltip.Header>Age: {format(context.y(data))}</Tooltip.Header>
 				<Tooltip.List>
-					{#each series as s}
+					{#each context.series.visibleSeries as s}
 						{@const valueAccessor = accessor(s.value ?? s.key)}
 						{@const value = Math.abs(valueAccessor(data))}
 						<Tooltip.Item label={s.key} color={s.color}>

docs/src/examples/components/GeoProjection/true-size-globe.svelte

@@ -402,7 +402,7 @@
 						fitGeojson: { type: 'Sphere' }
 					}}
 					transform={{
-						mode: 'manual',
+						mode: 'canvas',
 						scrollMode: 'scale',
 						initialScale: 3,
 						scaleExtent: [zoomMin, zoomMax],
@@ -418,7 +418,7 @@
 						{@const cy = context.height / 2}
 
 						<!-- Region A -->
-						<Layer>
+						<Layer ignoreTransform>
 							<GeoProjection
 								projection={() => geoAzimuthalEqualArea().clipAngle(150)}
 								rotate={{ yaw: rotateA[0], pitch: rotateA[1], roll: rotateA[2] }}
@@ -437,7 +437,7 @@
 						</Layer>
 
 						<!-- Region B - blended -->
-						<Layer>
+						<Layer ignoreTransform>
 							<GeoProjection
 								projection={() => geoAzimuthalEqualArea().clipAngle(150)}
 								rotate={{ yaw: rotateB[0], pitch: rotateB[1], roll: rotateB[2] }}

docs/src/examples/components/LineChart/null-dashed-gaps.svelte

@@ -12,8 +12,8 @@
 </script>
 
 <LineChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300}>
-	{#snippet belowMarks({ series })}
-		{#each series as s}
+	{#snippet belowMarks({ context })}
+		{#each context.series.visibleSeries as s}
 			<Spline
 				data={data.filter((d) => d.value !== null)}
 				y={s.value}

docs/static/screenshots/index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-20T18:45:21.306Z",
+  "generatedAt": "2026-08-25T17:59:23.475Z",
   "totalComponents": 80,
   "totalExamples": 980,
   "components": [
@@ -684,12 +684,12 @@
         {
           "name": "tooltip-fixed-with-hide-delay",
           "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
-          "checksum": "6eb0bfff9bffb6f7c21cd0b2c8808102"
+          "checksum": "95120b8297e3a6c762b8cd8be972469e"
         },
         {
           "name": "tooltip-locking",
           "path": "/example/AreaChart/tooltip-locking",
-          "checksum": "f5e240f2e05b96a8986f7647ed05d307"
+          "checksum": "d38c62564f3fb61bb21d122b5e8a5c65"
         }
       ]
     },
@@ -1054,7 +1054,7 @@
         {
           "name": "facet-stack-long-data",
           "path": "/example/BarChart/facet-stack-long-data",
-          "checksum": ""
+          "checksum": "e3999220700f23bc50eb44521bda35e0"
         },
         {
           "name": "gradient",
@@ -1314,7 +1314,7 @@
         {
           "name": "series-horizontal-diverging",
           "path": "/example/BarChart/series-horizontal-diverging",
-          "checksum": "25a296da40c0e694ebb6a19b25a48b10"
+          "checksum": "5b3084d1f66cb11ce39d8c9c89c15aa9"
         },
         {
           "name": "series-horizontal-diverging-as-percent",
@@ -2929,7 +2929,7 @@
         {
           "name": "true-size-globe",
           "path": "/example/GeoProjection/true-size-globe",
-          "checksum": "51e3d08a51caea0e5bf109d9d094d4ba"
+          "checksum": "746799980991d5bf11af9cbee71cc854"
         }
       ]
     },
@@ -3459,7 +3459,7 @@
         {
           "name": "null-dashed-gaps",
           "path": "/example/LineChart/null-dashed-gaps",
-          "checksum": "264bef9de13b096e6f25dc6c64096c3e"
+          "checksum": "0439ba4eab1aff35a1e8ab518acd6df7"
         },
         {
           "name": "null-gaps",