@internetstiftelsen/charts 0.7.0 → 0.8.0

package/README.md

@@ -7,6 +7,7 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Framework Agnostic** - Works with vanilla JS, React, Vue, Svelte, or any framework
 - **Composable Architecture** - Build charts by composing components
 - **Multiple Chart Types** - XYChart (lines, areas, bars), DonutChart, PieChart, and GaugeChart
+- **Stacking Control** - Bar stacking modes with optional reversed visual series order
 - **Flexible Scales** - Band, linear, time, and logarithmic scales
 - **Auto Resize** - Built-in ResizeObserver handles responsive behavior
 - **Responsive Policy** - Chart-level container-query overrides for theme and components
@@ -20,6 +21,42 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 npm install @internetstiftelsen/charts
 ```
 
+## Local Development
+
+```bash
+pnpm dev
+```
+
+Runs the interactive demo app (`index.html`) with sidebar controls and
+Chart/Data/Showcase tabs.
+
+```bash
+pnpm dev:docs
+```
+
+Runs the marketing landing page (`docs.html`) built on
+`@internetstiftelsen/styleguide`.
+
+## Build Targets
+
+```bash
+pnpm build
+```
+
+Builds the publishable chart library output into `dist`.
+
+```bash
+pnpm build:docs
+```
+
+Builds the static marketing site into `dist-docs` (used for Pages deploys).
+
+```bash
+pnpm build:demo
+```
+
+Builds the demo app using the default Vite config.
+
 ## Quick Start
 
 ```javascript

package/bar.js

@@ -1,4 +1,18 @@
 import { getContrastTextColor, sanitizeForCSS, mergeDeep } from './utils.js';
+const LABEL_INSET_DEFAULT = 4;
+const LABEL_INSET_STACKED = 6;
+const LABEL_MIN_PADDING_DEFAULT = 8;
+const LABEL_MIN_PADDING_STACKED = 16;
+const LAYER_LABEL_GAP = 6;
+function getLabelSpacing(mode) {
+    const stacked = mode !== 'none';
+    return {
+        inset: stacked ? LABEL_INSET_STACKED : LABEL_INSET_DEFAULT,
+        minPadding: stacked
+            ? LABEL_MIN_PADDING_STACKED
+            : LABEL_MIN_PADDING_DEFAULT,
+    };
+}
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -426,76 +440,42 @@ export class Bar {
                 }
             }
             else {
-                // Inside the bar - with special handling for layer mode
-                if (mode === 'layer') {
-                    const totalSeries = stackingContext?.totalSeries ?? 1;
-                    const seriesIndex = stackingContext?.seriesIndex ?? 0;
-                    const isTopLayer = seriesIndex === totalSeries - 1;
-                    switch (insidePosition) {
-                        case 'top':
-                            // For layer mode + inside + top: check if there's enough space in the gap
-                            if (seriesIndex < totalSeries - 1) {
-                                // Calculate the gap to the next layer
-                                const nextLayerScaleFactor = 1 - ((seriesIndex + 1) / totalSeries) * 0.7;
-                                const nextLayerWidth = (this.maxBarSize
-                                    ? Math.min(bandwidth, this.maxBarSize)
-                                    : bandwidth) * nextLayerScaleFactor;
-                                const gap = (barWidth - nextLayerWidth) / 2;
-                                const marginBelow = 4; // Minimum margin below text
-                                if (boxHeight + marginBelow <= gap) {
-                                    labelY =
-                                        barTop + boxHeight / 2 + marginBelow;
-                                }
-                                else {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                // Top layer - use normal top position if it fits
-                                labelY = barTop + boxHeight / 2 + 4;
-                                if (boxHeight + 8 > barHeight) {
-                                    shouldRender = false;
-                                }
-                            }
-                            break;
-                        case 'middle':
-                            // For layer mode + inside + middle: only show what fits
-                            labelY = (barTop + barBottom) / 2;
-                            if (boxHeight + 8 > barHeight) {
-                                shouldRender = false;
-                            }
-                            break;
-                        case 'bottom':
-                            // For layer mode + inside + bottom: only show for top layer if it fits
-                            if (isTopLayer) {
-                                labelY = barBottom - boxHeight / 2 - 4;
-                                if (boxHeight + 8 > barHeight) {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                shouldRender = false;
-                            }
-                            break;
-                    }
+                if (mode === 'layer' && insidePosition === 'bottom') {
+                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
+                    shouldRender = false;
                 }
                 else {
-                    // Non-layer modes - use existing logic
+                    const { inset, minPadding } = getLabelSpacing(mode);
                     switch (insidePosition) {
                         case 'top':
-                            labelY = barTop + boxHeight / 2 + 4;
+                            labelY = barTop + boxHeight / 2 + inset;
                             break;
                         case 'middle':
                             labelY = (barTop + barBottom) / 2;
                             break;
                         case 'bottom':
-                            labelY = barBottom - boxHeight / 2 - 4;
+                            labelY = barBottom - boxHeight / 2 - inset;
                             break;
                     }
                     // Check if it fits inside the bar
-                    if (boxHeight + 8 > barHeight) {
+                    if (boxHeight + minPadding > barHeight) {
                         shouldRender = false;
                     }
+                    // In layer mode, check the label fits in the visible gap
+                    // above the next layer's bar top
+                    if (shouldRender &&
+                        mode === 'layer' &&
+                        insidePosition === 'top' &&
+                        stackingContext?.nextLayerData) {
+                        const nextValue = stackingContext.nextLayerData.get(categoryKey);
+                        if (nextValue !== undefined) {
+                            const nextBarTop = y(nextValue) || 0;
+                            const labelBottom = labelY + boxHeight / 2;
+                            if (labelBottom + LAYER_LABEL_GAP > nextBarTop) {
+                                shouldRender = false;
+                            }
+                        }
+                    }
                 }
             }
             tempText.remove();
@@ -644,78 +624,43 @@ export class Bar {
                 }
             }
             else {
-                // Inside the bar - with special handling for layer mode
-                if (mode === 'layer') {
-                    const totalSeries = stackingContext?.totalSeries ?? 1;
-                    const seriesIndex = stackingContext?.seriesIndex ?? 0;
-                    const isTopLayer = seriesIndex === totalSeries - 1;
-                    // Map top/middle/bottom to start/middle/end for horizontal
-                    switch (insidePosition) {
-                        case 'top': // start of bar (left side)
-                            // For layer mode + inside + top(left): check if there's enough space in the gap
-                            if (seriesIndex < totalSeries - 1) {
-                                // Calculate the gap to the next layer
-                                const nextLayerScaleFactor = 1 - ((seriesIndex + 1) / totalSeries) * 0.7;
-                                const nextLayerHeight = (this.maxBarSize
-                                    ? Math.min(bandwidth, this.maxBarSize)
-                                    : bandwidth) * nextLayerScaleFactor;
-                                const gap = (barHeight - nextLayerHeight) / 2;
-                                const marginRight = 4; // Minimum margin to the right of text
-                                if (boxWidth + marginRight <= gap) {
-                                    labelX =
-                                        barLeft + boxWidth / 2 + marginRight;
-                                }
-                                else {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                // Top layer - use normal left position if it fits
-                                labelX = barLeft + boxWidth / 2 + 4;
-                                if (boxWidth + 8 > barWidth) {
-                                    shouldRender = false;
-                                }
-                            }
-                            break;
-                        case 'middle':
-                            // For layer mode + inside + middle: only show what fits
-                            labelX = (barLeft + barRight) / 2;
-                            if (boxWidth + 8 > barWidth) {
-                                shouldRender = false;
-                            }
-                            break;
-                        case 'bottom': // end of bar (right side)
-                            // For layer mode + inside + bottom(right): only show for top layer if it fits
-                            if (isTopLayer) {
-                                labelX = barRight - boxWidth / 2 - 4;
-                                if (boxWidth + 8 > barWidth) {
-                                    shouldRender = false;
-                                }
-                            }
-                            else {
-                                shouldRender = false;
-                            }
-                            break;
-                    }
+                // Map top/middle/bottom to start/middle/end for horizontal
+                if (mode === 'layer' && insidePosition === 'bottom') {
+                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
+                    shouldRender = false;
                 }
                 else {
-                    // Non-layer modes - use existing logic
-                    // Map top/middle/bottom to start/middle/end for horizontal
+                    const { inset, minPadding } = getLabelSpacing(mode);
                     switch (insidePosition) {
                         case 'top': // start of bar (left side)
-                            labelX = barLeft + boxWidth / 2 + 4;
+                            labelX = barLeft + boxWidth / 2 + inset;
                             break;
                         case 'middle':
                             labelX = (barLeft + barRight) / 2;
                             break;
                         case 'bottom': // end of bar (right side)
-                            labelX = barRight - boxWidth / 2 - 4;
+                            labelX = barRight - boxWidth / 2 - inset;
                             break;
                     }
                     // Check if it fits inside the bar
-                    if (boxWidth + 8 > barWidth) {
+                    if (boxWidth + minPadding > barWidth) {
                         shouldRender = false;
                     }
+                    // In layer mode, check the label fits in the visible gap
+                    // before the next layer's bar end
+                    if (shouldRender &&
+                        mode === 'layer' &&
+                        insidePosition === 'top' &&
+                        stackingContext?.nextLayerData) {
+                        const nextValue = stackingContext.nextLayerData.get(categoryKey);
+                        if (nextValue !== undefined) {
+                            const nextBarRight = x(nextValue) || 0;
+                            const labelRight = labelX + boxWidth / 2;
+                            if (labelRight + LAYER_LABEL_GAP > nextBarRight) {
+                                shouldRender = false;
+                            }
+                        }
+                    }
                 }
             }
             tempText.remove();

package/base-chart.js

@@ -377,15 +377,12 @@ export class BaseChart {
                 const matchesIndex = match.index === undefined || match.index === index;
                 const matchesType = match.type === undefined || match.type === component.type;
                 const matchesDataKey = match.dataKey === undefined ||
-                    (typeof dataKey === 'string' &&
-                        dataKey === match.dataKey);
+                    (typeof dataKey === 'string' && dataKey === match.dataKey);
                 if (!matchesIndex || !matchesType || !matchesDataKey) {
                     return;
                 }
                 const existing = componentOverrides.get(component);
-                componentOverrides.set(component, existing
-                    ? mergeDeep(existing, override)
-                    : { ...override });
+                componentOverrides.set(component, existing ? mergeDeep(existing, override) : { ...override });
             });
         });
         return {

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.7.0",
+    "version": "0.8.0",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -16,13 +16,17 @@
     ],
     "scripts": {
         "dev": "vite",
-        "build": "tsc -b && vite build",
+        "dev:docs": "vite --config vite.docs.config.ts --open",
+        "build": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+        "build:demo": "tsc -b && vite build",
+        "build:docs": "vite build --config vite.docs.config.ts && cp -R docs dist-docs/docs",
         "lint": "eslint .",
         "format": "prettier --write ./src",
         "preview": "vite preview",
+        "preview:docs": "vite preview --config vite.docs.config.ts",
         "test": "vitest",
         "test:run": "vitest run",
-        "build:lib": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+        "build:lib": "npm run build",
         "prepub": "rm -rf dist && npm run build:lib && cp package.json dist && cp README.md dist",
         "pub": "npm run prepub && cd dist && npm publish --access public"
     },
@@ -49,6 +53,8 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.39.2",
+        "@internetstiftelsen/styleguide": "^5.1.23",
+        "@speed-highlight/core": "^1.2.14",
         "@tailwindcss/vite": "^4.1.18",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
@@ -63,6 +69,7 @@
         "globals": "^16.5.0",
         "jsdom": "^27.4.0",
         "prettier": "3.6.2",
+        "sass": "^1.97.3",
         "tsc-alias": "^1.8.16",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.9.3",

package/title.d.ts

@@ -3,6 +3,7 @@ import type { TitleConfig, ChartTheme, ExportHooks, TitleConfigBase } from './ty
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
     readonly type: "title";
+    readonly display: boolean;
     readonly text: string;
     readonly exportHooks?: ExportHooks<TitleConfigBase>;
     private readonly fontSize;

package/title.js

@@ -7,6 +7,12 @@ export class Title {
             writable: true,
             value: 'title'
         });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "text", {
             enumerable: true,
             configurable: true,
@@ -55,6 +61,7 @@ export class Title {
             writable: true,
             value: void 0
         });
+        this.display = config.display ?? true;
         this.text = config.text;
         this.fontSize = config.fontSize ?? 18;
         this.fontWeight = config.fontWeight ?? 'bold';
@@ -66,6 +73,7 @@ export class Title {
     }
     getExportConfig() {
         return {
+            display: this.display,
             text: this.text,
             fontSize: this.fontSize,
             fontWeight: this.fontWeight,
@@ -86,6 +94,13 @@ export class Title {
      * Returns the space required by the title
      */
     getRequiredSpace() {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: 'top',
+            };
+        }
         return {
             width: 0, // Title spans full width
             height: this.marginTop + this.fontSize + this.marginBottom,
@@ -93,6 +108,9 @@ export class Title {
         };
     }
     render(svg, theme, width, x = 0, y = 0) {
+        if (!this.display) {
+            return;
+        }
         const titleGroup = svg
             .append('g')
             .attr('class', 'title')

package/types.d.ts

@@ -207,6 +207,7 @@ export type AreaConfig = AreaConfigBase & {
 export type BarStackConfig = {
     mode?: BarStackMode;
     gap?: number;
+    reverseSeries?: boolean;
 };
 export type AreaStackMode = 'none' | 'normal' | 'percent';
 export type AreaStackConfig = {
@@ -218,6 +219,7 @@ export declare function getSeriesColor(series: {
 }): string;
 export type LabelOversizedBehavior = 'truncate' | 'wrap' | 'hide';
 export type XAxisConfigBase = {
+    display?: boolean;
     dataKey?: string;
     labelKey?: string;
     groupLabelKey?: string;
@@ -235,6 +237,7 @@ export type XAxisConfig = XAxisConfigBase & {
     exportHooks?: ExportHooks<XAxisConfigBase>;
 };
 export type YAxisConfigBase = {
+    display?: boolean;
     tickFormat?: string | ((value: number) => string) | null;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
@@ -287,6 +290,7 @@ export type LegendItem = {
     visible: boolean;
 };
 export type TitleConfigBase = {
+    display?: boolean;
     text: string;
     fontSize?: number;
     fontWeight?: string;
@@ -324,6 +328,7 @@ export type BarStackingContext = {
     cumulativeData: Map<string, number>;
     totalData: Map<string, number>;
     gap: number;
+    nextLayerData?: Map<string, number>;
 };
 export type AreaStackingContext = {
     mode: AreaStackMode;

package/x-axis.d.ts

@@ -3,6 +3,7 @@ import type { XAxisConfig, ChartTheme, D3Scale, DataItem, ExportHooks, XAxisConf
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     readonly type: "xAxis";
+    readonly display: boolean;
     readonly dataKey?: string;
     readonly labelKey?: string;
     readonly groupLabelKey?: string;
@@ -16,6 +17,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly tickFormat;
     private wrapLineCount;
     private estimatedHeight;
+    private estimatedTickLabelVerticalFootprint;
     private readonly autoHideOverlapping;
     private readonly minLabelGap;
     private readonly preserveEndLabels;
@@ -30,6 +32,7 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     getRequiredSpace(): ComponentSpace;
     estimateLayoutSpace(labels: unknown[], theme: ChartTheme, svg: SVGSVGElement): void;
     clearEstimatedSpace(): void;
+    private getTickLabelVerticalFootprint;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number, data?: DataItem[]): void;
     private buildLabelLookup;
     private renderGroupLabels;

package/x-axis.js

@@ -25,6 +25,12 @@ export class XAxis {
             writable: true,
             value: 'xAxis'
         });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "dataKey", {
             enumerable: true,
             configurable: true,
@@ -104,6 +110,12 @@ export class XAxis {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "estimatedTickLabelVerticalFootprint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "autoHideOverlapping", {
             enumerable: true,
             configurable: true,
@@ -128,6 +140,7 @@ export class XAxis {
             writable: true,
             value: void 0
         });
+        this.display = config?.display ?? true;
         this.dataKey = config?.dataKey;
         this.labelKey = config?.labelKey;
         this.groupLabelKey = config?.groupLabelKey;
@@ -144,6 +157,7 @@ export class XAxis {
     }
     getExportConfig() {
         return {
+            display: this.display,
             dataKey: this.dataKey,
             labelKey: this.labelKey,
             groupLabelKey: this.groupLabelKey,
@@ -169,6 +183,13 @@ export class XAxis {
      * Returns the space required by the x-axis
      */
     getRequiredSpace() {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: 'bottom',
+            };
+        }
         if (this.estimatedHeight !== null) {
             return {
                 width: 0,
@@ -198,6 +219,8 @@ export class XAxis {
     estimateLayoutSpace(labels, theme, svg) {
         if (!labels.length) {
             this.estimatedHeight = null;
+            this.estimatedTickLabelVerticalFootprint = null;
+            this.wrapLineCount = 1;
             return;
         }
         const parsedFontSize = typeof theme.axis.fontSize === 'string'
@@ -232,9 +255,13 @@ export class XAxis {
         if (this.rotatedLabels) {
             const radians = Math.PI / 4;
             const verticalFootprint = Math.sin(radians) * maxWidth + Math.cos(radians) * textHeight;
+            this.estimatedTickLabelVerticalFootprint = verticalFootprint;
             this.estimatedHeight = this.tickPadding + verticalFootprint + 5;
         }
         else {
+            const wrappedExtraHeight = Math.max(0, maxLines - 1) * lineHeight;
+            this.estimatedTickLabelVerticalFootprint =
+                this.fontSize + wrappedExtraHeight;
             this.estimatedHeight = this.tickPadding + textHeight + 5;
         }
         if (this.showGroupLabels) {
@@ -242,12 +269,29 @@ export class XAxis {
             this.estimatedHeight +=
                 this.groupLabelGap + groupLabelStyle.fontSize + 5;
         }
-        this.wrapLineCount = Math.max(this.wrapLineCount, maxLines);
+        this.wrapLineCount = maxLines;
     }
     clearEstimatedSpace() {
         this.estimatedHeight = null;
+        this.estimatedTickLabelVerticalFootprint = null;
+    }
+    getTickLabelVerticalFootprint() {
+        if (this.estimatedTickLabelVerticalFootprint !== null) {
+            return this.estimatedTickLabelVerticalFootprint;
+        }
+        if (this.rotatedLabels) {
+            // Fallback to the same rough factor used by getRequiredSpace().
+            const baseHeight = this.tickPadding + this.fontSize + 5;
+            return Math.max(baseHeight * 2.5 - this.tickPadding - 5, 0);
+        }
+        const lineHeight = this.fontSize * 1.2;
+        const wrappedExtraHeight = Math.max(0, this.wrapLineCount - 1) * lineHeight;
+        return this.fontSize + wrappedExtraHeight;
     }
     render(svg, x, theme, yPosition, data = []) {
+        if (!this.display) {
+            return;
+        }
         const labelLookup = this.buildLabelLookup(data);
         const axisGenerator = axisBottom(x)
             .tickSizeOuter(0)
@@ -321,7 +365,8 @@ export class XAxis {
         if (groupRanges.length === 0) {
             return;
         }
-        const yOffset = this.tickPadding + this.fontSize + this.groupLabelGap;
+        const tickLabelVerticalFootprint = this.getTickLabelVerticalFootprint();
+        const yOffset = this.tickPadding + tickLabelVerticalFootprint + this.groupLabelGap;
         const groupLabelStyle = this.resolveGroupLabelStyle(theme);
         const groupLayer = svg
             .append('g')

package/xy-chart.d.ts

@@ -9,6 +9,7 @@ export declare class XYChart extends BaseChart {
     private readonly series;
     private barStackMode;
     private barStackGap;
+    private barStackReverseSeries;
     private areaStackMode;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponent): this;
@@ -22,6 +23,7 @@ export declare class XYChart extends BaseChart {
     protected getLegendSeries(): LegendSeries[];
     private getCategoryScaleType;
     private getVisibleSeries;
+    private getDisplaySeries;
     private setupScales;
     private isHorizontalOrientation;
     private collectSeriesValues;

package/xy-chart.js

@@ -23,6 +23,12 @@ export class XYChart extends BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "barStackReverseSeries", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "areaStackMode", {
             enumerable: true,
             configurable: true,
@@ -31,6 +37,7 @@ export class XYChart extends BaseChart {
         });
         this.barStackMode = config.barStack?.mode ?? 'normal';
         this.barStackGap = config.barStack?.gap ?? 0.1;
+        this.barStackReverseSeries = config.barStack?.reverseSeries ?? false;
         this.areaStackMode = config.areaStack?.mode ?? 'none';
     }
     addChild(component) {
@@ -120,6 +127,7 @@ export class XYChart extends BaseChart {
             barStack: {
                 mode: this.barStackMode,
                 gap: this.barStackGap,
+                reverseSeries: this.barStackReverseSeries,
             },
             areaStack: {
                 mode: this.areaStackMode,
@@ -235,7 +243,8 @@ export class XYChart extends BaseChart {
         return (Object.keys(this.data[0]).find((key) => !this.series.some((s) => s.dataKey === key)) || 'column');
     }
     getLegendSeries() {
-        return this.series.map((series) => {
+        const displaySeries = this.getDisplaySeries();
+        return displaySeries.map((series) => {
             if (series.type === 'line') {
                 return {
                     dataKey: series.dataKey,
@@ -252,10 +261,32 @@ export class XYChart extends BaseChart {
         return this.scaleConfig.x?.type || 'band';
     }
     getVisibleSeries() {
+        const displaySeries = this.getDisplaySeries();
         if (!this.legend) {
+            return displaySeries;
+        }
+        return displaySeries.filter((series) => this.legend.isSeriesVisible(series.dataKey));
+    }
+    getDisplaySeries() {
+        if (!this.barStackReverseSeries) {
+            return this.series;
+        }
+        const barSeries = this.series.filter((entry) => {
+            return entry.type === 'bar';
+        });
+        if (barSeries.length < 2) {
             return this.series;
         }
-        return this.series.filter((series) => this.legend.isSeriesVisible(series.dataKey));
+        const reversedBars = [...barSeries].reverse();
+        let reversedBarIndex = 0;
+        return this.series.map((entry) => {
+            if (entry.type !== 'bar') {
+                return entry;
+            }
+            const nextBar = reversedBars[reversedBarIndex];
+            reversedBarIndex += 1;
+            return nextBar;
+        });
     }
     setupScales() {
         const xKey = this.getXKey();
@@ -509,9 +540,12 @@ export class XYChart extends BaseChart {
                 .append('g')
                 .attr('class', 'area-value-label-layer')
             : null;
-        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(this.data, xKey, barSeries);
+        const { cumulativeDataBySeriesIndex, totalData, rawValuesBySeriesIndex, } = this.computeStackingData(this.data, xKey, barSeries);
         const areaStackingContextBySeries = this.computeAreaStackingContexts(this.data, xKey, areaSeries);
         barSeries.forEach((series, barIndex) => {
+            const nextLayerData = this.barStackMode === 'layer'
+                ? rawValuesBySeriesIndex.get(barIndex + 1)
+                : undefined;
             const stackingContext = {
                 mode: this.barStackMode,
                 seriesIndex: barIndex,
@@ -519,6 +553,7 @@ export class XYChart extends BaseChart {
                 cumulativeData: cumulativeDataBySeriesIndex.get(barIndex) ?? new Map(),
                 totalData,
                 gap: this.barStackGap,
+                nextLayerData,
             };
             series.render(this.plotGroup, this.data, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
         });
@@ -534,15 +569,25 @@ export class XYChart extends BaseChart {
     }
     computeStackingData(data, xKey, barSeries) {
         const cumulativeDataBySeriesIndex = new Map();
+        const rawValuesBySeriesIndex = new Map();
         const totalData = new Map();
         data.forEach((dataPoint) => {
             const categoryKey = String(dataPoint[xKey]);
             let total = 0;
-            barSeries.forEach((series) => {
+            barSeries.forEach((series, seriesIndex) => {
                 const value = this.parseValue(dataPoint[series.dataKey]);
                 if (Number.isFinite(value)) {
                     total += value;
                 }
+                // Build per-series raw value maps (used for layer next-layer data)
+                let rawMap = rawValuesBySeriesIndex.get(seriesIndex);
+                if (!rawMap) {
+                    rawMap = new Map();
+                    rawValuesBySeriesIndex.set(seriesIndex, rawMap);
+                }
+                if (Number.isFinite(value)) {
+                    rawMap.set(categoryKey, value);
+                }
             });
             totalData.set(categoryKey, total);
         });
@@ -561,7 +606,11 @@ export class XYChart extends BaseChart {
             });
             cumulativeDataBySeriesIndex.set(seriesIndex, cumulativeForSeries);
         });
-        return { cumulativeDataBySeriesIndex, totalData };
+        return {
+            cumulativeDataBySeriesIndex,
+            totalData,
+            rawValuesBySeriesIndex,
+        };
     }
     computeAreaStackingContexts(data, xKey, areaSeries) {
         const contextMap = new Map();

package/y-axis.d.ts

@@ -3,6 +3,7 @@ import type { ChartTheme, YAxisConfig, D3Scale, ExportHooks, YAxisConfigBase } f
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class YAxis implements LayoutAwareComponent<YAxisConfigBase> {
     readonly type: "yAxis";
+    readonly display: boolean;
     private readonly tickPadding;
     private readonly fontSize;
     private readonly maxLabelWidth;

package/y-axis.js

@@ -8,6 +8,12 @@ export class YAxis {
             writable: true,
             value: 'yAxis'
         });
+        Object.defineProperty(this, "display", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tickPadding", {
             enumerable: true,
             configurable: true,
@@ -51,6 +57,7 @@ export class YAxis {
             writable: true,
             value: void 0
         });
+        this.display = config?.display ?? true;
         this.tickFormat = config?.tickFormat ?? null;
         this.rotatedLabels = config?.rotatedLabels ?? false;
         this.maxLabelWidth = config?.maxLabelWidth ?? 40; // Default 40 for backward compatibility
@@ -59,6 +66,7 @@ export class YAxis {
     }
     getExportConfig() {
         return {
+            display: this.display,
             tickFormat: this.tickFormat,
             rotatedLabels: this.rotatedLabels,
             maxLabelWidth: this.maxLabelWidth,
@@ -76,6 +84,13 @@ export class YAxis {
      * Returns the space required by the y-axis
      */
     getRequiredSpace() {
+        if (!this.display) {
+            return {
+                width: 0,
+                height: 0,
+                position: 'left',
+            };
+        }
         // Width = max label width + tick padding
         // Rotated labels need less width (cos(45°) ≈ 0.7 of horizontal width)
         const baseWidth = this.maxLabelWidth + this.tickPadding;
@@ -87,6 +102,9 @@ export class YAxis {
         };
     }
     render(svg, y, theme, xPosition) {
+        if (!this.display) {
+            return;
+        }
         const axis = axisLeft(y).tickSize(0).tickPadding(this.tickPadding);
         // Apply tick formatting if specified
         if (this.tickFormat) {