@internetstiftelsen/charts 0.0.8 → 0.1.0

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, D3Scale, 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: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType?: ScaleType, theme?: ChartTheme, stackingContext?: BarStackingContext): void;
     private renderVertical;
     private renderHorizontal;
     private renderVerticalValueLabels;

package/bar.js

@@ -1,3 +1,4 @@
+import { sanitizeForCSS } from './utils.js';
 export class Bar {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -54,10 +55,11 @@ export class Bar {
         let scaledValue;
         switch (scaleType) {
             case 'band':
-                scaledValue = value;
+                scaledValue = String(value);
                 break;
             case 'time':
-                scaledValue = value instanceof Date ? value : new Date(value);
+                scaledValue =
+                    value instanceof Date ? value : new Date(String(value));
                 break;
             case 'linear':
             case 'log':
@@ -66,90 +68,267 @@ 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;
         // Add bar rectangles
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
-            .selectAll(`.bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .selectAll(`.bar-${sanitizedKey}`)
             .data(data)
             .join('rect')
-            .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .attr('class', `bar-${sanitizedKey}`)
+            .attr('data-index', (_, i) => i)
             .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;
         // Add bar rectangles (horizontal)
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
-            .selectAll(`.bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .selectAll(`.bar-${sanitizedKey}`)
             .data(data)
             .join('rect')
-            .attr('class', `bar-${this.dataKey.replace(/\s+/g, '-')}`)
+            .attr('class', `bar-${sanitizedKey}`)
+            .attr('data-index', (_, i) => i)
             .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;
@@ -166,16 +345,37 @@ export class Bar {
         const padding = config.padding ?? theme.valueLabel.padding;
         const labelGroup = plotGroup
             .append('g')
-            .attr('class', `bar-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+            .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
         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')
@@ -186,7 +386,7 @@ export class Bar {
             const textBBox = tempText.node().getBBox();
             const boxWidth = textBBox.width + padding * 2;
             const boxHeight = textBBox.height + padding * 2;
-            let labelX = barCenterX;
+            const labelX = barCenterX;
             let labelY;
             let shouldRender = true;
             if (position === 'outside') {
@@ -249,9 +449,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;
@@ -268,16 +502,37 @@ export class Bar {
         const padding = config.padding ?? theme.valueLabel.padding;
         const labelGroup = plotGroup
             .append('g')
-            .attr('class', `bar-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+            .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
         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')
@@ -289,7 +544,7 @@ export class Bar {
             const boxWidth = textBBox.width + padding * 2;
             const boxHeight = textBBox.height + padding * 2;
             let labelX;
-            let labelY = barCenterY;
+            const labelY = barCenterY;
             let shouldRender = true;
             if (position === 'outside') {
                 // Place to the right of the bar

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, ExportOptions, D3Scale } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
@@ -30,8 +30,8 @@ export declare abstract class BaseChart {
     protected svg: Selection<SVGSVGElement, undefined, null, undefined> | null;
     protected plotGroup: Selection<SVGGElement, undefined, null, undefined> | null;
     protected container: HTMLElement | null;
-    protected x: any;
-    protected y: any;
+    protected x: D3Scale | null;
+    protected y: D3Scale | null;
     protected resizeObserver: ResizeObserver | null;
     protected layoutManager: LayoutManager;
     protected plotArea: PlotAreaBounds | null;
@@ -68,5 +68,18 @@ export declare abstract class BaseChart {
      * Destroys the chart and cleans up resources
      */
     destroy(): void;
-    protected parseValue(value: any): number;
+    protected parseValue(value: unknown): number;
+    /**
+     * Exports the chart in the specified format
+     * @param format - The export format ('svg' or 'json')
+     * @param options - Optional export options (download, filename)
+     * @returns The exported content as a string if download is false/undefined, void if download is true
+     */
+    export(format: ExportFormat, options?: ExportOptions): string | void;
+    /**
+     * Downloads the exported content as a file
+     */
+    private downloadContent;
+    protected exportSVG(): string;
+    protected exportJSON(): string;
 }

package/base-chart.js

@@ -222,6 +222,62 @@ export class BaseChart {
         this.y = null;
     }
     parseValue(value) {
-        return typeof value === 'string' ? parseFloat(value) : value;
+        if (typeof value === 'string') {
+            return parseFloat(value);
+        }
+        if (typeof value === 'number') {
+            return value;
+        }
+        return 0;
+    }
+    /**
+     * Exports the chart in the specified format
+     * @param format - The export format ('svg' or 'json')
+     * @param options - Optional export options (download, filename)
+     * @returns The exported content as a string if download is false/undefined, void if download is true
+     */
+    export(format, options) {
+        const content = format === 'svg'
+            ? this.exportSVG()
+            : this.exportJSON();
+        if (options?.download) {
+            this.downloadContent(content, format, options);
+            return;
+        }
+        return content;
+    }
+    /**
+     * Downloads the exported content as a file
+     */
+    downloadContent(content, format, options) {
+        const mimeType = format === 'svg'
+            ? 'image/svg+xml'
+            : 'application/json';
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = options.filename || `chart.${format}`;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        URL.revokeObjectURL(url);
+    }
+    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/grid.d.ts

@@ -1,10 +1,10 @@
 import { type Selection } from 'd3';
-import type { GridConfig, ChartTheme } from './types.js';
+import type { GridConfig, ChartTheme, D3Scale } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Grid implements ChartComponent {
     readonly type: "grid";
     readonly horizontal: boolean;
     readonly vertical: boolean;
     constructor(config?: GridConfig);
-    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, x: any, y: any, theme: ChartTheme): void;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, x: D3Scale, y: D3Scale, theme: ChartTheme): void;
 }

package/line.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { LineConfig, DataItem, ScaleType, ChartTheme, LineValueLabelConfig } from './types.js';
+import type { LineConfig, DataItem, D3Scale, ScaleType, ChartTheme, LineValueLabelConfig } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Line implements ChartComponent {
     readonly type: "line";
@@ -8,6 +8,6 @@ export declare class Line implements ChartComponent {
     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;
+    render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme): void;
     private renderValueLabels;
 }