@internetstiftelsen/charts 0.0.8 → 0.0.9

package/bar.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-import type { BarConfig, DataItem, ScaleType, Orientation, ChartTheme, BarValueLabelConfig } from './types.js';
+import type { BarConfig, BarStackingContext, BarValueLabelConfig, ChartTheme, DataItem, Orientation, ScaleType } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Bar implements ChartComponent {
     readonly type: "bar";
@@ -11,7 +11,7 @@ export declare class Bar implements ChartComponent {
     readonly valueLabel?: BarValueLabelConfig;
     constructor(config: BarConfig);
     private getScaledPosition;
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType, theme?: ChartTheme): void;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType, theme?: ChartTheme, stackingContext?: BarStackingContext): void;
     private renderVertical;
     private renderHorizontal;
     private renderVerticalValueLabels;

package/bar.js

@@ -66,29 +66,66 @@ export class Bar {
         }
         return scale(scaledValue) || 0;
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext) {
         if (this.orientation === 'vertical') {
-            this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType);
+            this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext);
         }
         else {
-            this.renderHorizontal(plotGroup, data, xKey, x, y, parseValue, xScaleType);
+            this.renderHorizontal(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext);
         }
         // Render value labels if enabled
         if (this.valueLabel?.show && theme) {
             if (this.orientation === 'vertical') {
-                this.renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme);
+                this.renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext);
             }
             else {
-                this.renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme);
+                this.renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext);
             }
         }
     }
-    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType) {
+    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
-        const barWidth = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
+        const mode = stackingContext?.mode ?? 'normal';
+        // Calculate bar width based on stacking mode
+        let barWidth;
+        let barOffset;
+        if (mode === 'none') {
+            // Grouped bars: divide bandwidth among series with gap
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const gap = stackingContext?.gap ?? 0.1;
+            const groupWidth = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
+                : bandwidth;
+            // Calculate total gap space and individual bar width
+            const totalGapSpace = groupWidth * gap * (totalSeries - 1);
+            const availableWidth = groupWidth - totalGapSpace;
+            barWidth = availableWidth / totalSeries;
+            const gapSize = totalSeries > 1 ? groupWidth * gap : 0;
+            barOffset =
+                (bandwidth - groupWidth) / 2 +
+                    seriesIndex * (barWidth + gapSize);
+        }
+        else if (mode === 'layer') {
+            // Layer mode: each subsequent series has smaller bars
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const maxWidth = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            // Scale from 100% to a minimum (e.g., 30%) based on series position
+            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
+            barWidth = maxWidth * scaleFactor;
+            barOffset = (bandwidth - barWidth) / 2;
+        }
+        else {
+            // Normal and Percent modes: full width stacked bars
+            barWidth = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            barOffset = (bandwidth - barWidth) / 2;
+        }
         // Get the baseline value from the Y scale's domain
-        // For linear scales, use 0 if it's in the domain, otherwise use domain max (bottom of chart)
-        // For log scales, use the minimum value from the domain
         const yDomain = y.domain();
         const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
         const yBaseline = y(baselineValue) || 0;
@@ -100,27 +137,97 @@ export class Bar {
             .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
             .attr('x', (d) => {
             const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
-            const offset = (bandwidth - barWidth) / 2;
-            // For non-band scales, center the bar
-            return xScaleType === 'band' ? xPos + offset : xPos - barWidth / 2;
+            return xScaleType === 'band'
+                ? xPos + barOffset
+                : xPos - barWidth / 2;
         })
             .attr('y', (d) => {
-            const yPos = y(parseValue(d[this.dataKey])) || 0;
-            return Math.min(yBaseline, yPos);
+            const categoryKey = String(d[xKey]);
+            const value = parseValue(d[this.dataKey]);
+            if (mode === 'none' || mode === 'layer') {
+                // No stacking - each bar starts from baseline
+                const yPos = y(value) || 0;
+                return Math.min(yBaseline, yPos);
+            }
+            else if (mode === 'percent') {
+                // Percent mode: calculate position based on cumulative percentage
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
+                const percentCumulative = (cumulative / total) * 100;
+                const percentValue = (value / total) * 100;
+                return y(percentCumulative + percentValue) || 0;
+            }
+            else {
+                // Normal stacking mode
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                return y(cumulative + value) || 0;
+            }
         })
             .attr('width', barWidth)
             .attr('height', (d) => {
-            const yPos = y(parseValue(d[this.dataKey])) || 0;
-            return Math.abs(yBaseline - yPos);
+            const categoryKey = String(d[xKey]);
+            const value = parseValue(d[this.dataKey]);
+            if (mode === 'none' || mode === 'layer') {
+                const yPos = y(value) || 0;
+                return Math.abs(yBaseline - yPos);
+            }
+            else if (mode === 'percent') {
+                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
+                const percentValue = (value / total) * 100;
+                const yTop = y(percentValue) || 0;
+                const yBottom = y(0) || 0;
+                return Math.abs(yBottom - yTop);
+            }
+            else {
+                // Normal stacking mode
+                const yTop = y(value) || 0;
+                return Math.abs(yBaseline - yTop);
+            }
         })
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
-    renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType) {
+    renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
-        const barHeight = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
+        const mode = stackingContext?.mode ?? 'normal';
+        // Calculate bar height based on stacking mode
+        let barHeight;
+        let barOffset;
+        if (mode === 'none') {
+            // Grouped bars: divide bandwidth among series with gap
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const gap = stackingContext?.gap ?? 0.1;
+            const groupHeight = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
+                : bandwidth;
+            // Calculate total gap space and individual bar height
+            const totalGapSpace = groupHeight * gap * (totalSeries - 1);
+            const availableHeight = groupHeight - totalGapSpace;
+            barHeight = availableHeight / totalSeries;
+            const gapSize = totalSeries > 1 ? groupHeight * gap : 0;
+            barOffset =
+                (bandwidth - groupHeight) / 2 +
+                    seriesIndex * (barHeight + gapSize);
+        }
+        else if (mode === 'layer') {
+            // Layer mode: each subsequent series has smaller bars
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const maxHeight = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
+            barHeight = maxHeight * scaleFactor;
+            barOffset = (bandwidth - barHeight) / 2;
+        }
+        else {
+            // Normal and Percent modes: full height stacked bars
+            barHeight = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            barOffset = (bandwidth - barHeight) / 2;
+        }
         // Get the baseline value from the scale's domain
-        // For linear scales, use 0 if it's in the domain, otherwise use domain min
-        // For log scales, use the minimum value from the domain
         const domain = x.domain();
         const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
         const xBaseline = x(baselineValue) || 0;
@@ -131,25 +238,91 @@ export class Bar {
             .join('rect')
             .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
             .attr('x', (d) => {
-            const xPos = x(parseValue(d[this.dataKey])) || 0;
-            return Math.min(xBaseline, xPos);
+            const categoryKey = String(d[xKey]);
+            const value = parseValue(d[this.dataKey]);
+            if (mode === 'none' || mode === 'layer') {
+                const xPos = x(value) || 0;
+                return Math.min(xBaseline, xPos);
+            }
+            else if (mode === 'percent') {
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
+                const percentCumulative = (cumulative / total) * 100;
+                return x(percentCumulative) || 0;
+            }
+            else {
+                // Normal stacking mode
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                return x(cumulative) || 0;
+            }
         })
             .attr('y', (d) => {
             const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
-            const offset = (bandwidth - barHeight) / 2;
-            // For non-band scales, center the bar
-            return yScaleType === 'band' ? yPos + offset : yPos - barHeight / 2;
+            return yScaleType === 'band'
+                ? yPos + barOffset
+                : yPos - barHeight / 2;
         })
             .attr('width', (d) => {
-            const xPos = x(parseValue(d[this.dataKey])) || 0;
-            return Math.abs(xPos - xBaseline);
+            const categoryKey = String(d[xKey]);
+            const value = parseValue(d[this.dataKey]);
+            if (mode === 'none' || mode === 'layer') {
+                const xPos = x(value) || 0;
+                return Math.abs(xPos - xBaseline);
+            }
+            else if (mode === 'percent') {
+                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
+                const percentValue = (value / total) * 100;
+                const xLeft = x(0) || 0;
+                const xRight = x(percentValue) || 0;
+                return Math.abs(xRight - xLeft);
+            }
+            else {
+                // Normal stacking mode
+                const xLeft = x(0) || 0;
+                const xRight = x(value) || 0;
+                return Math.abs(xRight - xLeft);
+            }
         })
             .attr('height', barHeight)
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
-    renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme) {
+    renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
-        const barWidth = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
+        const mode = stackingContext?.mode ?? 'normal';
+        // Calculate bar width based on stacking mode (same logic as renderVertical)
+        let barWidth;
+        let barOffset;
+        if (mode === 'none') {
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const gap = stackingContext?.gap ?? 0.1;
+            const groupWidth = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
+                : bandwidth;
+            const totalGapSpace = groupWidth * gap * (totalSeries - 1);
+            const availableWidth = groupWidth - totalGapSpace;
+            barWidth = availableWidth / totalSeries;
+            const gapSize = totalSeries > 1 ? groupWidth * gap : 0;
+            barOffset =
+                (bandwidth - groupWidth) / 2 +
+                    seriesIndex * (barWidth + gapSize);
+        }
+        else if (mode === 'layer') {
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const maxWidth = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
+            barWidth = maxWidth * scaleFactor;
+            barOffset = (bandwidth - barWidth) / 2;
+        }
+        else {
+            barWidth = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            barOffset = (bandwidth - barWidth) / 2;
+        }
         const yDomain = y.domain();
         const baselineValue = yDomain[0] >= 0 ? Math.max(0, yDomain[0]) : yDomain[0];
         const yBaseline = y(baselineValue) || 0;
@@ -168,14 +341,35 @@ export class Bar {
             .append('g')
             .attr('class', `bar-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
         data.forEach((d) => {
+            const categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
             const valueText = String(value);
             const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
-            const yPos = y(value) || 0;
-            const barHeight = Math.abs(yBaseline - yPos);
-            const barTop = Math.min(yBaseline, yPos);
-            const barBottom = Math.max(yBaseline, yPos);
-            const barCenterX = xPos + (xScaleType === 'band' ? (bandwidth - barWidth) / 2 : -barWidth / 2) + barWidth / 2;
+            // Calculate bar position based on stacking mode
+            let barTop;
+            let barBottom;
+            if (mode === 'none' || mode === 'layer') {
+                const yPos = y(value) || 0;
+                barTop = Math.min(yBaseline, yPos);
+                barBottom = Math.max(yBaseline, yPos);
+            }
+            else if (mode === 'percent') {
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
+                const percentCumulative = (cumulative / total) * 100;
+                const percentValue = (value / total) * 100;
+                barTop = y(percentCumulative + percentValue) || 0;
+                barBottom = y(percentCumulative) || 0;
+            }
+            else {
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                barTop = y(cumulative + value) || 0;
+                barBottom = y(cumulative) || 0;
+            }
+            const barHeight = Math.abs(barBottom - barTop);
+            const barCenterX = xPos +
+                (xScaleType === 'band' ? barOffset : -barWidth / 2) +
+                barWidth / 2;
             // Create temporary text to measure dimensions
             const tempText = labelGroup
                 .append('text')
@@ -249,9 +443,43 @@ export class Bar {
             }
         });
     }
-    renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme) {
+    renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
-        const barHeight = this.maxBarSize ? Math.min(bandwidth, this.maxBarSize) : bandwidth;
+        const mode = stackingContext?.mode ?? 'normal';
+        // Calculate bar height based on stacking mode (same logic as renderHorizontal)
+        let barHeight;
+        let barOffset;
+        if (mode === 'none') {
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const gap = stackingContext?.gap ?? 0.1;
+            const groupHeight = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize * totalSeries)
+                : bandwidth;
+            const totalGapSpace = groupHeight * gap * (totalSeries - 1);
+            const availableHeight = groupHeight - totalGapSpace;
+            barHeight = availableHeight / totalSeries;
+            const gapSize = totalSeries > 1 ? groupHeight * gap : 0;
+            barOffset =
+                (bandwidth - groupHeight) / 2 +
+                    seriesIndex * (barHeight + gapSize);
+        }
+        else if (mode === 'layer') {
+            const totalSeries = stackingContext?.totalSeries ?? 1;
+            const seriesIndex = stackingContext?.seriesIndex ?? 0;
+            const maxHeight = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            const scaleFactor = 1 - (seriesIndex / totalSeries) * 0.7;
+            barHeight = maxHeight * scaleFactor;
+            barOffset = (bandwidth - barHeight) / 2;
+        }
+        else {
+            barHeight = this.maxBarSize
+                ? Math.min(bandwidth, this.maxBarSize)
+                : bandwidth;
+            barOffset = (bandwidth - barHeight) / 2;
+        }
         const domain = x.domain();
         const baselineValue = domain[0] >= 0 ? Math.max(0, domain[0]) : domain[0];
         const xBaseline = x(baselineValue) || 0;
@@ -270,14 +498,35 @@ export class Bar {
             .append('g')
             .attr('class', `bar-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
         data.forEach((d) => {
+            const categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
             const valueText = String(value);
             const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
-            const xPos = x(value) || 0;
-            const barWidth = Math.abs(xPos - xBaseline);
-            const barLeft = Math.min(xBaseline, xPos);
-            const barRight = Math.max(xBaseline, xPos);
-            const barCenterY = yPos + (yScaleType === 'band' ? (bandwidth - barHeight) / 2 : -barHeight / 2) + barHeight / 2;
+            // Calculate bar position based on stacking mode
+            let barLeft;
+            let barRight;
+            if (mode === 'none' || mode === 'layer') {
+                const xPos = x(value) || 0;
+                barLeft = Math.min(xBaseline, xPos);
+                barRight = Math.max(xBaseline, xPos);
+            }
+            else if (mode === 'percent') {
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                const total = stackingContext?.totalData.get(categoryKey) ?? 1;
+                const percentCumulative = (cumulative / total) * 100;
+                const percentValue = (value / total) * 100;
+                barLeft = x(percentCumulative) || 0;
+                barRight = x(percentCumulative + percentValue) || 0;
+            }
+            else {
+                const cumulative = stackingContext?.cumulativeData.get(categoryKey) ?? 0;
+                barLeft = x(cumulative) || 0;
+                barRight = x(cumulative + value) || 0;
+            }
+            const barWidth = Math.abs(barRight - barLeft);
+            const barCenterY = yPos +
+                (yScaleType === 'band' ? barOffset : -barHeight / 2) +
+                barHeight / 2;
             // Create temporary text to measure dimensions
             const tempText = labelGroup
                 .append('text')

package/base-chart.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { DataItem, ChartTheme, AxisScaleConfig } from './types.js';
+import type { DataItem, ChartTheme, AxisScaleConfig, ExportFormat } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
@@ -69,4 +69,10 @@ export declare abstract class BaseChart {
      */
     destroy(): void;
     protected parseValue(value: any): number;
+    /**
+     * Exports the chart in the specified format
+     */
+    export(format: ExportFormat): string;
+    protected exportSVG(): string;
+    protected exportJSON(): string;
 }

package/base-chart.js

@@ -224,4 +224,30 @@ export class BaseChart {
     parseValue(value) {
         return typeof value === 'string' ? parseFloat(value) : value;
     }
+    /**
+     * Exports the chart in the specified format
+     */
+    export(format) {
+        if (format === 'svg') {
+            return this.exportSVG();
+        }
+        return this.exportJSON();
+    }
+    exportSVG() {
+        if (!this.svg) {
+            throw new Error('Chart must be rendered before export');
+        }
+        const clone = this.svg.node().cloneNode(true);
+        clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        clone.setAttribute('width', String(this.width));
+        clone.setAttribute('height', String(this.theme.height));
+        return clone.outerHTML;
+    }
+    exportJSON() {
+        return JSON.stringify({
+            data: this.data,
+            theme: this.theme,
+            scales: this.scaleConfig,
+        }, null, 2);
+    }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.8",
+    "version": "0.0.9",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -24,6 +24,7 @@
         "pub": "npm run prepub && cd dist && npm publish --access public"
     },
     "dependencies": {
+        "@handsontable/react-wrapper": "^16.2.0",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-switch": "^1.2.6",
@@ -33,6 +34,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "d3": "^7.9.0",
+        "handsontable": "^16.2.0",
         "lucide-react": "^0.548.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",

package/types.d.ts

@@ -1,6 +1,7 @@
 export type DataItem = {
     [key: string]: any;
 };
+export type ExportFormat = 'svg' | 'json';
 export type ColorPalette = string[];
 export type ChartTheme = {
     width: number;
@@ -79,6 +80,10 @@ export type BarConfig = {
     maxBarSize?: number;
     valueLabel?: BarValueLabelConfig;
 };
+export type BarStackConfig = {
+    mode?: BarStackMode;
+    gap?: number;
+};
 export declare function getSeriesColor(series: {
     stroke?: string;
     fill?: string;
@@ -116,10 +121,6 @@ export type TitleConfig = {
     marginTop?: number;
     marginBottom?: number;
 };
-export type ChartStyle = {
-    maxHeight?: string;
-    aspectRatio?: number;
-};
 export type ScaleType = 'band' | 'linear' | 'time' | 'log';
 export type ScaleConfig = {
     type: ScaleType;
@@ -135,3 +136,12 @@ export type AxisScaleConfig = {
     y?: Partial<ScaleConfig>;
 };
 export type Orientation = 'vertical' | 'horizontal';
+export type BarStackMode = 'none' | 'normal' | 'percent' | 'layer';
+export type BarStackingContext = {
+    mode: BarStackMode;
+    seriesIndex: number;
+    totalSeries: number;
+    cumulativeData: Map<string, number>;
+    totalData: Map<string, number>;
+    gap: number;
+};

package/xy-chart.d.ts

@@ -1,10 +1,15 @@
+import type { BarStackConfig } from './types.js';
 import { BaseChart, type BaseChartConfig } from './base-chart.js';
 import type { ChartComponent } from './chart-interface.js';
-export type XYChartConfig = BaseChartConfig;
+export type XYChartConfig = BaseChartConfig & {
+    barStack?: BarStackConfig;
+};
 export declare class XYChart extends BaseChart {
     private readonly series;
     private sortedDataCache;
     private xKeyCache;
+    private barStackMode;
+    private barStackGap;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponent): this;
     private rerender;
@@ -15,4 +20,5 @@ export declare class XYChart extends BaseChart {
     private isHorizontalOrientation;
     private createScale;
     private renderSeries;
+    private computeStackingData;
 }

package/xy-chart.js

@@ -23,6 +23,20 @@ export class XYChart extends BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "barStackMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "barStackGap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.barStackMode = config.barStack?.mode ?? 'normal';
+        this.barStackGap = config.barStack?.gap ?? 0.1;
     }
     addChild(component) {
         const type = component.type;
@@ -189,8 +203,8 @@ export class XYChart extends BaseChart {
         else if ((scaleType === 'linear' || scaleType === 'log') && dataKey) {
             // For linear and log scales with a dataKey, calculate from that key
             const values = this.data.map((d) => this.parseValue(d[dataKey]));
-            const minVal = config.min ?? (min(values) ?? 0);
-            const maxVal = config.max ?? (max(values) ?? 100);
+            const minVal = config.min ?? min(values) ?? 0;
+            const maxVal = config.max ?? max(values) ?? 100;
             domain =
                 scaleType === 'log' && minVal <= 0
                     ? [1, maxVal]
@@ -198,13 +212,30 @@ export class XYChart extends BaseChart {
         }
         else {
             // Calculate from series data (for value axes without explicit dataKey)
-            const values = this.data.flatMap((d) => this.series.map((s) => this.parseValue(d[s.dataKey])));
-            const minVal = config.min ?? (min(values) ?? 0);
-            const maxVal = config.max ?? (max(values) ?? 100);
-            domain =
-                scaleType === 'log' && minVal <= 0
-                    ? [1, maxVal]
-                    : [minVal, maxVal];
+            const barSeries = this.series.filter((s) => s.type === 'bar');
+            // For percent stacking, domain is always 0-100
+            if (this.barStackMode === 'percent' && barSeries.length > 0) {
+                domain = [0, 100];
+            }
+            else if (this.barStackMode === 'normal' && barSeries.length > 1) {
+                // For normal stacking, calculate cumulative totals
+                const stackedValues = this.data.map((d) => {
+                    return barSeries.reduce((sum, s) => sum + this.parseValue(d[s.dataKey]), 0);
+                });
+                const minVal = config.min ?? 0;
+                const maxVal = config.max ?? max(stackedValues) ?? 100;
+                domain = [minVal, maxVal];
+            }
+            else {
+                // For none, layer, or single bar: use individual values
+                const values = this.data.flatMap((d) => this.series.map((s) => this.parseValue(d[s.dataKey])));
+                const minVal = config.min ?? min(values) ?? 0;
+                const maxVal = config.max ?? max(values) ?? 100;
+                domain =
+                    scaleType === 'log' && minVal <= 0
+                        ? [1, maxVal]
+                        : [minVal, maxVal];
+            }
         }
         switch (scaleType) {
             case 'band': {
@@ -265,8 +296,54 @@ export class XYChart extends BaseChart {
         const visibleSeries = this.legend
             ? this.series.filter((series) => this.legend.isSeriesVisible(series.dataKey))
             : this.series;
+        // Get only bar series for stacking calculations
+        const barSeries = visibleSeries.filter((s) => s.type === 'bar');
+        // Compute stacking data for bar charts
+        const { cumulativeDataBySeriesIndex, totalData } = this.computeStackingData(sortedData, xKey, barSeries);
         visibleSeries.forEach((series) => {
-            series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
+            if (series.type === 'bar') {
+                const barIndex = barSeries.indexOf(series);
+                const stackingContext = {
+                    mode: this.barStackMode,
+                    seriesIndex: barIndex,
+                    totalSeries: barSeries.length,
+                    cumulativeData: cumulativeDataBySeriesIndex.get(barIndex) ?? new Map(),
+                    totalData,
+                    gap: this.barStackGap,
+                };
+                series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme, stackingContext);
+            }
+            else {
+                series.render(this.plotGroup, sortedData, xKey, this.x, this.y, this.parseValue, categoryScaleType, this.theme);
+            }
+        });
+    }
+    computeStackingData(data, xKey, barSeries) {
+        const cumulativeDataBySeriesIndex = new Map();
+        const totalData = new Map();
+        // First pass: compute totals for each category
+        data.forEach((d) => {
+            const categoryKey = String(d[xKey]);
+            let total = 0;
+            barSeries.forEach((series) => {
+                total += this.parseValue(d[series.dataKey]);
+            });
+            totalData.set(categoryKey, total);
+        });
+        // Second pass: compute cumulative values for each series at each category
+        barSeries.forEach((_, seriesIndex) => {
+            const cumulativeForSeries = new Map();
+            data.forEach((d) => {
+                const categoryKey = String(d[xKey]);
+                let cumulative = 0;
+                // Sum all previous series' values for this category
+                for (let i = 0; i < seriesIndex; i++) {
+                    cumulative += this.parseValue(d[barSeries[i].dataKey]);
+                }
+                cumulativeForSeries.set(categoryKey, cumulative);
+            });
+            cumulativeDataBySeriesIndex.set(seriesIndex, cumulativeForSeries);
         });
+        return { cumulativeDataBySeriesIndex, totalData };
     }
 }