fix(ChartState): Don't filter explicit x1Domain/y1Domain by visible series when no series are configured. Restores grouped layout for composable <Chart> usage (e.g. <Bars> with x1/x1Domain/x1Range) where the visible-series filter previously emptied the secondary band scale domain, collapsing all bars to a single category position.

Author: techniq

.changeset/fix-x1-y1-domain-filter-without-series.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(ChartState): Don't filter explicit `x1Domain`/`y1Domain` by visible series when no series are configured. Restores grouped layout for composable `<Chart>` usage (e.g. `<Bars>` with `x1`/`x1Domain`/`x1Range`) where the visible-series filter previously emptied the secondary band scale domain, collapsing all bars to a single category position.

docs/src/routes/docs/screenshot/[component]/+layout.ts

@@ -14,16 +14,21 @@ export const load = async ({ params }) => {
 		if (match && match[1] === componentName) {
 			const [, comp, exampleName] = match;
 
-			const component = (await componentExamples[path]()) as Component;
-			const source = (await componentSources[path]()) as string;
+			try {
+				const component = (await componentExamples[path]()) as Component;
+				const source = (await componentSources[path]()) as string;
 
-			// Remove `export { data };`
-			const cleanupSource = source.replace(/(\n\s*)*^.*export .*;.*$(\n\s*)*/gm, '\n');
+				// Remove `export { data };`
+				const cleanupSource = source.replace(/(\n\s*)*^.*export .*;.*$(\n\s*)*/gm, '\n');
 
-			if (!examples[comp]) {
-				examples[comp] = {};
+				if (!examples[comp]) {
+					examples[comp] = {};
+				}
+				examples[comp][exampleName] = { component, source: cleanupSource, module: {} };
+			} catch (err) {
+				// Skip broken examples so one failure doesn't kill the whole batch load
+				console.warn(`Failed to load example ${comp}/${exampleName}:`, err);
 			}
-			examples[comp][exampleName] = { component, source: cleanupSource, module: {} };
 		}
 	}
 

packages/layerchart/src/lib/states/chart.svelte.test.ts

@@ -1579,3 +1579,53 @@ describe('ChartState group layout auto-derives x1/y1', () => {
     }
   });
 });
+
+describe('ChartState x1Domain/y1Domain without series', () => {
+  type LongData = { year: number; fruit: string; value: number };
+  const longData: LongData[] = [
+    { year: 2019, fruit: 'apples', value: 3840 },
+    { year: 2019, fruit: 'bananas', value: 1920 },
+    { year: 2018, fruit: 'apples', value: 1600 },
+    { year: 2018, fruit: 'bananas', value: 1440 },
+  ];
+
+  it('should pass through explicit x1Domain when no series are configured', () => {
+    const { state, cleanup } = createChartState<LongData>({
+      data: longData,
+      x: 'year',
+      xScale: scaleBand(),
+      y: 'value',
+      x1: 'fruit',
+      x1Domain: ['apples', 'bananas'],
+      x1Range: ({ xScale }) => [0, (xScale as any).bandwidth()],
+    });
+
+    try {
+      expect(state.seriesState.series).toHaveLength(0);
+      expect(state.x1Domain).toEqual(['apples', 'bananas']);
+      expect(state.x1Scale!.domain()).toEqual(['apples', 'bananas']);
+    } finally {
+      cleanup();
+    }
+  });
+
+  it('should pass through explicit y1Domain when no series are configured', () => {
+    const { state, cleanup } = createChartState<LongData>({
+      data: longData,
+      y: 'year',
+      yScale: scaleBand(),
+      x: 'value',
+      y1: 'fruit',
+      y1Domain: ['apples', 'bananas'],
+      y1Range: ({ yScale }) => [0, (yScale as any).bandwidth()],
+    });
+
+    try {
+      expect(state.seriesState.series).toHaveLength(0);
+      expect(state.y1Domain).toEqual(['apples', 'bananas']);
+      expect(state.y1Scale!.domain()).toEqual(['apples', 'bananas']);
+    } finally {
+      cleanup();
+    }
+  });
+});

packages/layerchart/src/lib/states/chart.svelte.ts

@@ -867,8 +867,13 @@ export class ChartState<
 
   x1Domain = $derived.by(() => {
     if (this.props.x1Domain) {
-      const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
-      return this.props.x1Domain.filter((key: any) => visibleKeys.has(key));
+      // Only filter by visible series when series are configured — otherwise the
+      // full x1Domain is used as-is (composable charts without series).
+      if (this.seriesState.series.length > 0) {
+        const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
+        return this.props.x1Domain.filter((key: any) => visibleKeys.has(key));
+      }
+      return this.props.x1Domain;
     }
     // Auto-derive for grouped series when x is the category axis
     if (this.props.seriesLayout === 'group' && this.valueAxis === 'y') {
@@ -881,8 +886,13 @@ export class ChartState<
   });
   y1Domain = $derived.by(() => {
     if (this.props.y1Domain) {
-      const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
-      return this.props.y1Domain.filter((key: any) => visibleKeys.has(key));
+      // Only filter by visible series when series are configured — otherwise the
+      // full y1Domain is used as-is (composable charts without series).
+      if (this.seriesState.series.length > 0) {
+        const visibleKeys = new Set(this.seriesState.visibleSeries.map((s) => s.key));
+        return this.props.y1Domain.filter((key: any) => visibleKeys.has(key));
+      }
+      return this.props.y1Domain;
     }
     // Auto-derive for grouped series when y is the category axis
     if (this.props.seriesLayout === 'group' && this.valueAxis === 'x') {