@internetstiftelsen/charts 0.0.7 → 0.0.9

package/bar.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-import type { BarConfig, DataItem, ScaleType, Orientation, ChartTheme } 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";
@@ -7,8 +7,13 @@ export declare class Bar implements ChartComponent {
     readonly fill: string;
     readonly colorAdapter?: (data: DataItem, index: number) => string;
     readonly orientation: Orientation;
+    readonly maxBarSize?: number;
+    readonly valueLabel?: BarValueLabelConfig;
     constructor(config: BarConfig);
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType?: ScaleType, _theme?: ChartTheme): void;
+    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, stackingContext?: BarStackingContext): void;
     private renderVertical;
     private renderHorizontal;
+    private renderVerticalValueLabels;
+    private renderHorizontalValueLabels;
 }

package/bar.js

@@ -30,43 +30,102 @@ export class Bar {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "maxBarSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config.dataKey;
         this.fill = config.fill || '#8884d8';
         this.colorAdapter = config.colorAdapter;
         this.orientation = config.orientation || 'vertical';
+        this.maxBarSize = config.maxBarSize;
+        this.valueLabel = config.valueLabel;
+    }
+    getScaledPosition(data, key, scale, scaleType) {
+        const value = data[key];
+        let scaledValue;
+        switch (scaleType) {
+            case 'band':
+                scaledValue = value;
+                break;
+            case 'time':
+                scaledValue = value instanceof Date ? value : new Date(value);
+                break;
+            case 'linear':
+            case 'log':
+                scaledValue = typeof value === 'number' ? value : Number(value);
+                break;
+        }
+        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, stackingContext);
+            }
+            else {
+                this.renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext);
+            }
         }
     }
-    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType) {
-        const getXPosition = (d) => {
-            const xValue = d[xKey];
-            let scaledValue;
-            switch (xScaleType) {
-                case 'band':
-                    scaledValue = xValue;
-                    break;
-                case 'time':
-                    scaledValue =
-                        xValue instanceof Date ? xValue : new Date(xValue);
-                    break;
-                case 'linear':
-                case 'log':
-                    scaledValue =
-                        typeof xValue === 'number' ? xValue : Number(xValue);
-                    break;
-            }
-            return x(scaledValue) || 0;
-        };
+    renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
+        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;
@@ -77,45 +136,98 @@ export class Bar {
             .join('rect')
             .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
             .attr('x', (d) => {
-            const xPos = getXPosition(d);
-            // For non-band scales, center the bar
-            return xScaleType === 'band' ? xPos : xPos - bandwidth / 2;
+            const xPos = this.getScaledPosition(d, xKey, x, xScaleType);
+            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', bandwidth)
+            .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) {
-        const getYPosition = (d) => {
-            const yValue = d[xKey];
-            let scaledValue;
-            switch (yScaleType) {
-                case 'band':
-                    scaledValue = yValue;
-                    break;
-                case 'time':
-                    scaledValue =
-                        yValue instanceof Date ? yValue : new Date(yValue);
-                    break;
-                case 'linear':
-                case 'log':
-                    scaledValue =
-                        typeof yValue === 'number' ? yValue : Number(yValue);
-                    break;
-            }
-            return y(scaledValue) || 0;
-        };
+    renderHorizontal(plotGroup, data, xKey, x, y, parseValue, yScaleType, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
+        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;
@@ -126,19 +238,366 @@ 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 = getYPosition(d);
-            // For non-band scales, center the bar
-            return yScaleType === 'band' ? yPos : yPos - bandwidth / 2;
+            const yPos = this.getScaledPosition(d, xKey, y, yScaleType);
+            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', bandwidth)
+            .attr('height', barHeight)
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
+    renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext) {
+        const bandwidth = x.bandwidth ? x.bandwidth() : 20;
+        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;
+        const config = this.valueLabel;
+        const position = config.position || 'outside';
+        const insidePosition = config.insidePosition || 'top';
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .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);
+            // 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')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            let labelX = barCenterX;
+            let labelY;
+            let shouldRender = true;
+            if (position === 'outside') {
+                // Place above the bar
+                labelY = barTop - boxHeight / 2 - 4;
+                // Check if it fits (not going above plot area)
+                const plotTop = y.range()[1];
+                if (labelY - boxHeight / 2 < plotTop) {
+                    shouldRender = false;
+                }
+            }
+            else {
+                // Inside the bar
+                switch (insidePosition) {
+                    case 'top':
+                        labelY = barTop + boxHeight / 2 + 4;
+                        break;
+                    case 'middle':
+                        labelY = (barTop + barBottom) / 2;
+                        break;
+                    case 'bottom':
+                        labelY = barBottom - boxHeight / 2 - 4;
+                        break;
+                }
+                // Check if it fits inside the bar
+                if (boxHeight + 8 > barHeight) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                if (position === 'outside') {
+                    // Draw rounded rectangle background
+                    group
+                        .append('rect')
+                        .attr('x', labelX - boxWidth / 2)
+                        .attr('y', labelY - boxHeight / 2)
+                        .attr('width', boxWidth)
+                        .attr('height', boxHeight)
+                        .attr('rx', borderRadius)
+                        .attr('ry', borderRadius)
+                        .attr('fill', background)
+                        .attr('stroke', border)
+                        .attr('stroke-width', 1);
+                }
+                // Draw text
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
+    }
+    renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme, stackingContext) {
+        const bandwidth = y.bandwidth ? y.bandwidth() : 20;
+        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;
+        const config = this.valueLabel;
+        const position = config.position || 'outside';
+        const insidePosition = config.insidePosition || 'top';
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .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);
+            // 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')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            let labelX;
+            let labelY = barCenterY;
+            let shouldRender = true;
+            if (position === 'outside') {
+                // Place to the right of the bar
+                labelX = barRight + boxWidth / 2 + 4;
+                // Check if it fits (not going beyond plot area)
+                const plotRight = x.range()[1];
+                if (labelX + boxWidth / 2 > plotRight) {
+                    shouldRender = false;
+                }
+            }
+            else {
+                // Inside the bar - map top/middle/bottom to start/middle/end for horizontal
+                switch (insidePosition) {
+                    case 'top': // start of bar (left side)
+                        labelX = barLeft + boxWidth / 2 + 4;
+                        break;
+                    case 'middle':
+                        labelX = (barLeft + barRight) / 2;
+                        break;
+                    case 'bottom': // end of bar (right side)
+                        labelX = barRight - boxWidth / 2 - 4;
+                        break;
+                }
+                // Check if it fits inside the bar
+                if (boxWidth + 8 > barWidth) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                if (position === 'outside') {
+                    // Draw rounded rectangle background
+                    group
+                        .append('rect')
+                        .attr('x', labelX - boxWidth / 2)
+                        .attr('y', labelY - boxHeight / 2)
+                        .attr('width', boxWidth)
+                        .attr('height', boxHeight)
+                        .attr('rx', borderRadius)
+                        .attr('ry', borderRadius)
+                        .attr('fill', background)
+                        .attr('stroke', border)
+                        .attr('stroke-width', 1);
+                }
+                // Draw text
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
+    }
 }

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/line.d.ts

@@ -1,11 +1,13 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, ScaleType, ChartTheme } from './types.js';
+import type { LineConfig, DataItem, ScaleType, ChartTheme, LineValueLabelConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Line implements ChartComponent {
     readonly type: "line";
     readonly dataKey: string;
     readonly stroke: string;
     readonly strokeWidth?: number;
+    readonly valueLabel?: LineValueLabelConfig;
     constructor(config: LineConfig);
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: any, y: any, parseValue: (value: any) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
+    private renderValueLabels;
 }

package/line.js

@@ -25,9 +25,16 @@ export class Line {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.dataKey = config.dataKey;
         this.stroke = config.stroke || '#8884d8';
         this.strokeWidth = config.strokeWidth;
+        this.valueLabel = config.valueLabel;
     }
     render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
         const getXPosition = (d) => {
@@ -83,5 +90,83 @@ export class Line {
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
+        // Render value labels if enabled
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition);
+        }
+    }
+    renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {
+        const config = this.valueLabel;
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `line-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+        const plotTop = y.range()[1];
+        const plotBottom = y.range()[0];
+        data.forEach((d) => {
+            const value = parseValue(d[this.dataKey]);
+            const valueText = String(value);
+            const xPos = getXPosition(d);
+            const yPos = y(value) || 0;
+            // Create temporary text to measure dimensions
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            let labelX = xPos;
+            let labelY;
+            let shouldRender = true;
+            // Default: place above the point
+            labelY = yPos - boxHeight / 2 - theme.line.point.size - 4;
+            // If too close to top, place below instead
+            if (labelY - boxHeight / 2 < plotTop + 4) {
+                labelY = yPos + boxHeight / 2 + theme.line.point.size + 4;
+                // Check if it fits below
+                if (labelY + boxHeight / 2 > plotBottom - 4) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                // Draw rounded rectangle background
+                group
+                    .append('rect')
+                    .attr('x', labelX - boxWidth / 2)
+                    .attr('y', labelY - boxHeight / 2)
+                    .attr('width', boxWidth)
+                    .attr('height', boxHeight)
+                    .attr('rx', borderRadius)
+                    .attr('ry', borderRadius)
+                    .attr('fill', background)
+                    .attr('stroke', border)
+                    .attr('stroke-width', 1);
+                // Draw text
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
     }
 }

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.7",
+    "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/theme.js

@@ -40,6 +40,16 @@ export const defaultTheme = {
             size: 5,
         },
     },
+    valueLabel: {
+        fontSize: 12,
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontWeight: '600',
+        color: '#1f2a36',
+        background: 'rgba(255, 255, 255, 0.95)',
+        border: '#e0e0e0',
+        borderRadius: 4,
+        padding: 4,
+    },
 };
 export const newspaperTheme = {
     width: 928,
@@ -84,6 +94,16 @@ export const newspaperTheme = {
             size: 5,
         },
     },
+    valueLabel: {
+        fontSize: 11,
+        fontFamily: 'Georgia, "Times New Roman", Times, serif',
+        fontWeight: '600',
+        color: '#1a1a1a',
+        background: 'rgba(245, 245, 220, 0.95)',
+        border: '#2c2c2c',
+        borderRadius: 2,
+        padding: 3,
+    },
 };
 export const themes = {
     default: defaultTheme,

package/tooltip.d.ts

@@ -5,8 +5,14 @@ import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 export declare class Tooltip implements ChartComponent {
+    readonly id = "iisChartTooltip";
     readonly type: "tooltip";
     readonly formatter?: (dataKey: string, value: any, data: DataItem) => string;
+    readonly labelFormatter?: (label: string, data: DataItem) => string;
+    readonly customFormatter?: (data: DataItem, series: {
+        dataKey: string;
+        [key: string]: any;
+    }[]) => string;
     private tooltipDiv;
     constructor(config?: TooltipConfig);
     initialize(theme: ChartTheme): void;

package/tooltip.js

@@ -2,6 +2,12 @@ import { pointer, select } from 'd3';
 import { getSeriesColor } from './types.js';
 export class Tooltip {
     constructor(config) {
+        Object.defineProperty(this, "id", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'iisChartTooltip'
+        });
         Object.defineProperty(this, "type", {
             enumerable: true,
             configurable: true,
@@ -14,6 +20,18 @@ export class Tooltip {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "labelFormatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "customFormatter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "tooltipDiv", {
             enumerable: true,
             configurable: true,
@@ -21,11 +39,15 @@ export class Tooltip {
             value: null
         });
         this.formatter = config?.formatter;
+        this.labelFormatter = config?.labelFormatter;
+        this.customFormatter = config?.customFormatter;
     }
     initialize(theme) {
+        this.cleanup();
         this.tooltipDiv = select('body')
             .append('div')
             .attr('class', 'chart-tooltip')
+            .attr('id', this.id)
             .style('position', 'absolute')
             .style('visibility', 'hidden')
             .style('background-color', 'white')
@@ -43,6 +65,8 @@ export class Tooltip {
             return;
         const tooltip = this.tooltipDiv;
         const formatter = this.formatter;
+        const labelFormatter = this.labelFormatter;
+        const customFormatter = this.customFormatter;
         // Helper to get x position for any scale type
         const getXPosition = (dataPoint) => {
             const xValue = dataPoint[xKey];
@@ -102,17 +126,27 @@ export class Tooltip {
                     .style('opacity', 1);
             });
             // Build tooltip content
-            let content = `<strong>${dataPoint[xKey]}</strong><br/>`;
-            series.forEach((s) => {
-                const value = dataPoint[s.dataKey];
-                if (formatter) {
-                    content +=
-                        formatter(s.dataKey, value, dataPoint) + '<br/>';
-                }
-                else {
-                    content += `${s.dataKey}: ${value}<br/>`;
-                }
-            });
+            let content;
+            if (customFormatter) {
+                content = customFormatter(dataPoint, series);
+            }
+            else {
+                const label = labelFormatter
+                    ? labelFormatter(dataPoint[xKey], dataPoint)
+                    : dataPoint[xKey];
+                content = `<strong>${label}</strong><br/>`;
+                series.forEach((s) => {
+                    const value = dataPoint[s.dataKey];
+                    if (formatter) {
+                        content +=
+                            formatter(s.dataKey, value, dataPoint) +
+                                '<br/>';
+                    }
+                    else {
+                        content += `${s.dataKey}: ${value}<br/>`;
+                    }
+                });
+            }
             // Position tooltip relative to the data point
             const svgRect = svg.node().getBoundingClientRect();
             const tooltipX = svgRect.left + window.scrollX + xPos + 10;
@@ -132,9 +166,11 @@ export class Tooltip {
         });
     }
     cleanup() {
-        if (this.tooltipDiv) {
-            this.tooltipDiv.remove();
-            this.tooltipDiv = null;
+        const tooltip = select(`#${this.id}`);
+        if (tooltip.empty()) {
+            return;
         }
+        tooltip.remove();
+        this.tooltipDiv = null;
     }
 }

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;
@@ -36,17 +37,52 @@ export type ChartTheme = {
             size: number;
         };
     };
+    valueLabel: {
+        fontSize: number;
+        fontFamily: string;
+        fontWeight: string;
+        color: string;
+        background: string;
+        border: string;
+        borderRadius: number;
+        padding: number;
+    };
+};
+export type ValueLabelConfig = {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+    color?: string;
+    background?: string;
+    border?: string;
+    borderRadius?: number;
+    padding?: number;
+};
+export type LineValueLabelConfig = ValueLabelConfig & {
+    show?: boolean;
+};
+export type BarValueLabelConfig = ValueLabelConfig & {
+    show?: boolean;
+    position?: 'inside' | 'outside';
+    insidePosition?: 'top' | 'middle' | 'bottom';
 };
 export type LineConfig = {
     dataKey: string;
     stroke?: string;
     strokeWidth?: number;
+    valueLabel?: LineValueLabelConfig;
 };
 export type BarConfig = {
     dataKey: string;
     fill?: string;
     colorAdapter?: (data: DataItem, index: number) => string;
     orientation?: 'vertical' | 'horizontal';
+    maxBarSize?: number;
+    valueLabel?: BarValueLabelConfig;
+};
+export type BarStackConfig = {
+    mode?: BarStackMode;
+    gap?: number;
 };
 export declare function getSeriesColor(series: {
     stroke?: string;
@@ -65,6 +101,11 @@ export type GridConfig = {
 };
 export type TooltipConfig = {
     formatter?: (dataKey: string, value: any, data: DataItem) => string;
+    labelFormatter?: (label: string, data: DataItem) => string;
+    customFormatter?: (data: DataItem, series: {
+        dataKey: string;
+        [key: string]: any;
+    }[]) => string;
 };
 export type LegendConfig = {
     position?: 'bottom';
@@ -80,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;
@@ -99,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 };
     }
 }