@internetstiftelsen/charts 0.0.9 → 0.1.1

package/bar.d.ts

@@ -1,5 +1,5 @@
 import type { Selection } from 'd3';
-import type { BarConfig, BarStackingContext, BarValueLabelConfig, ChartTheme, DataItem, Orientation, ScaleType } 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, stackingContext?: BarStackingContext): 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':
@@ -130,11 +132,13 @@ export class Bar {
         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);
             return xScaleType === 'band'
@@ -232,11 +236,13 @@ export class Bar {
         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 categoryKey = String(d[xKey]);
             const value = parseValue(d[this.dataKey]);
@@ -339,7 +345,7 @@ 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]);
@@ -380,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') {
@@ -496,7 +502,7 @@ 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]);
@@ -538,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, ExportFormat } 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,11 +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): string;
+    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,16 +222,46 @@ 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) {
-        if (format === 'svg') {
-            return this.exportSVG();
+    export(format, options) {
+        const content = format === 'svg'
+            ? this.exportSVG()
+            : this.exportJSON();
+        if (options?.download) {
+            this.downloadContent(content, format, options);
+            return;
         }
-        return this.exportJSON();
+        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) {

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;
 }

package/line.js

@@ -1,4 +1,5 @@
 import { line } from 'd3';
+import { sanitizeForCSS } from './utils.js';
 export class Line {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -43,13 +44,13 @@ export class Line {
             let scaledValue;
             switch (xScaleType) {
                 case 'band':
-                    // Band scale - use string or value as-is
-                    scaledValue = xValue;
+                    // Band scale - use string
+                    scaledValue = String(xValue);
                     break;
                 case 'time':
                     // Time scale - convert to Date
                     scaledValue =
-                        xValue instanceof Date ? xValue : new Date(xValue);
+                        xValue instanceof Date ? xValue : new Date(String(xValue));
                     break;
                 case 'linear':
                 case 'log':
@@ -62,7 +63,13 @@ export class Line {
             // Handle band scales with bandwidth
             return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
         };
+        // Helper to check if a data point has a valid (non-null) value
+        const hasValidValue = (d) => {
+            const value = d[this.dataKey];
+            return value !== null && value !== undefined;
+        };
         const lineGenerator = line()
+            .defined(hasValidValue)
             .x(getXPosition)
             .y((d) => y(parseValue(d[this.dataKey])) || 0);
         const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
@@ -78,21 +85,23 @@ export class Line {
             .attr('stroke', this.stroke)
             .attr('stroke-width', lineStrokeWidth)
             .attr('d', lineGenerator);
-        // Add data point circles
+        // Add data point circles (only for valid values)
+        const validData = data.filter(hasValidValue);
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
-            .selectAll(`.circle-${this.dataKey.replace(/\s+/g, '-')}`)
-            .data(data)
+            .selectAll(`.circle-${sanitizedKey}`)
+            .data(validData)
             .join('circle')
-            .attr('class', `circle-${this.dataKey.replace(/\s+/g, '-')}`)
+            .attr('class', `circle-${sanitizedKey}`)
             .attr('cx', getXPosition)
             .attr('cy', (d) => y(parseValue(d[this.dataKey])) || 0)
             .attr('r', pointSize)
             .attr('fill', pointColor)
             .attr('stroke', pointStrokeColor)
             .attr('stroke-width', pointStrokeWidth);
-        // Render value labels if enabled
+        // Render value labels if enabled (only for valid values)
         if (this.valueLabel?.show) {
-            this.renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition);
+            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition);
         }
     }
     renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {
@@ -107,7 +116,7 @@ export class Line {
         const padding = config.padding ?? theme.valueLabel.padding;
         const labelGroup = plotGroup
             .append('g')
-            .attr('class', `line-value-labels-${this.dataKey.replace(/\s+/g, '-')}`);
+            .attr('class', `line-value-labels-${sanitizeForCSS(this.dataKey)}`);
         const plotTop = y.range()[1];
         const plotBottom = y.range()[0];
         data.forEach((d) => {
@@ -125,7 +134,7 @@ export class Line {
             const textBBox = tempText.node().getBBox();
             const boxWidth = textBBox.width + padding * 2;
             const boxHeight = textBBox.height + padding * 2;
-            let labelX = xPos;
+            const labelX = xPos;
             let labelY;
             let shouldRender = true;
             // Default: place above the point

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "0.0.9",
+    "version": "0.1.1",
     "name": "@internetstiftelsen/charts",
     "type": "module",
     "sideEffects": false,
@@ -19,6 +19,8 @@
         "build": "tsc -b && vite build",
         "lint": "eslint .",
         "preview": "vite preview",
+        "test": "vitest",
+        "test:run": "vitest run",
         "build:lib": "tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
         "prepub": "rm -rf dist && npm run build:lib && cp package.json dist && cp README.md dist",
         "pub": "npm run prepub && cd dist && npm publish --access public"
@@ -43,6 +45,9 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.38.0",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
         "@types/node": "^24.9.2",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
@@ -51,11 +56,13 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.4.0",
+        "jsdom": "^27.4.0",
         "prettier": "3.6.2",
         "tsc-alias": "^1.8.16",
         "tw-animate-css": "^1.4.0",
         "typescript": "~5.9.3",
         "typescript-eslint": "^8.46.2",
-        "vite": "^7.1.12"
+        "vite": "^7.1.12",
+        "vitest": "^4.0.17"
     }
 }

package/tooltip.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { TooltipConfig, DataItem, ChartTheme } from './types.js';
+import type { TooltipConfig, DataItem, DataValue, D3Scale, ChartTheme } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
@@ -7,15 +7,16 @@ 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 formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     readonly labelFormatter?: (label: string, data: DataItem) => string;
     readonly customFormatter?: (data: DataItem, series: {
         dataKey: string;
-        [key: string]: any;
+        stroke?: string;
+        fill?: string;
     }[]) => string;
     private tooltipDiv;
     constructor(config?: TooltipConfig);
     initialize(theme: ChartTheme): void;
-    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: any, y: any, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: any) => number): void;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean): void;
     cleanup(): void;
 }

package/tooltip.js

@@ -1,5 +1,6 @@
 import { pointer, select } from 'd3';
 import { getSeriesColor } from './types.js';
+import { sanitizeForCSS } from './utils.js';
 export class Tooltip {
     constructor(config) {
         Object.defineProperty(this, "id", {
@@ -58,9 +59,10 @@ export class Tooltip {
             .style('font-family', theme.axis.fontFamily)
             .style('font-size', '12px')
             .style('pointer-events', 'none')
+            .style('transition', 'left 0.1s ease-out, top 0.1s ease-out')
             .style('z-index', '1000');
     }
-    attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue) {
+    attachToArea(svg, data, series, xKey, x, y, theme, plotArea, parseValue, isHorizontal = false) {
         if (!this.tooltipDiv)
             return;
         const tooltip = this.tooltipDiv;
@@ -77,6 +79,16 @@ export class Tooltip {
                     : new Date(xValue));
             return (scaled || 0) + (x.bandwidth ? x.bandwidth() / 2 : 0);
         };
+        // Helper to get y position for category scale (used in horizontal orientation)
+        const getYPosition = (dataPoint) => {
+            const yValue = dataPoint[xKey];
+            const scaled = y(yValue instanceof Date
+                ? yValue
+                : typeof yValue === 'string'
+                    ? yValue
+                    : new Date(yValue));
+            return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
+        };
         // Create overlay rect for mouse tracking using plot area bounds
         const overlay = svg
             .append('rect')
@@ -87,12 +99,16 @@ export class Tooltip {
             .attr('height', plotArea.height)
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        // Create focus circles for each series
-        const focusCircles = series.map((s) => {
+        // Determine which series are lines vs bars
+        const lineSeries = series.filter((s) => s.type === 'line');
+        const barSeries = series.filter((s) => s.type === 'bar');
+        const hasBarSeries = barSeries.length > 0;
+        // Create focus circles only for line series
+        const focusCircles = lineSeries.map((s) => {
             const seriesColor = getSeriesColor(s);
             return svg
                 .append('circle')
-                .attr('class', `focus-circle-${s.dataKey.replace(/\s+/g, '-')}`)
+                .attr('class', `focus-circle-${sanitizeForCSS(s.dataKey)}`)
                 .attr('r', theme.line.point.size + 1)
                 .attr('fill', theme.line.point.color || seriesColor)
                 .attr('stroke', theme.line.point.strokeColor || seriesColor)
@@ -102,29 +118,63 @@ export class Tooltip {
         });
         overlay
             .on('mousemove', (event) => {
-            const [mouseX] = pointer(event, svg.node());
-            // Find closest x value
-            const xPositions = data.map((d) => getXPosition(d));
+            const [mouseX, mouseY] = pointer(event, svg.node());
+            // Find closest data point based on orientation
             let closestIndex = 0;
-            let minDistance = Math.abs(mouseX - xPositions[0]);
-            for (let i = 1; i < xPositions.length; i++) {
-                const distance = Math.abs(mouseX - xPositions[i]);
-                if (distance < minDistance) {
-                    minDistance = distance;
-                    closestIndex = i;
+            let dataPointPosition;
+            if (isHorizontal) {
+                // For horizontal charts, find closest by Y position (categories on Y axis)
+                const yPositions = data.map((d) => getYPosition(d));
+                let minDistance = Math.abs(mouseY - yPositions[0]);
+                for (let i = 1; i < yPositions.length; i++) {
+                    const distance = Math.abs(mouseY - yPositions[i]);
+                    if (distance < minDistance) {
+                        minDistance = distance;
+                        closestIndex = i;
+                    }
+                }
+                dataPointPosition = yPositions[closestIndex];
+            }
+            else {
+                // For vertical charts, find closest by X position (categories on X axis)
+                const xPositions = data.map((d) => getXPosition(d));
+                let minDistance = Math.abs(mouseX - xPositions[0]);
+                for (let i = 1; i < xPositions.length; i++) {
+                    const distance = Math.abs(mouseX - xPositions[i]);
+                    if (distance < minDistance) {
+                        minDistance = distance;
+                        closestIndex = i;
+                    }
                 }
+                dataPointPosition = xPositions[closestIndex];
             }
             const dataPoint = data[closestIndex];
-            const xPos = xPositions[closestIndex];
-            // Update focus circles
-            series.forEach((s, i) => {
-                const yValue = parseValue(dataPoint[s.dataKey]);
-                const yPos = y(yValue);
-                focusCircles[i]
-                    .attr('cx', xPos)
-                    .attr('cy', yPos)
-                    .style('opacity', 1);
+            // Update focus circles for line series
+            lineSeries.forEach((s, i) => {
+                const value = parseValue(dataPoint[s.dataKey]);
+                if (isHorizontal) {
+                    // Horizontal: cx = value position (X), cy = category position (Y)
+                    focusCircles[i]
+                        .attr('cx', x(value))
+                        .attr('cy', dataPointPosition)
+                        .style('opacity', 1);
+                }
+                else {
+                    // Vertical: cx = category position (X), cy = value position (Y)
+                    focusCircles[i]
+                        .attr('cx', dataPointPosition)
+                        .attr('cy', y(value))
+                        .style('opacity', 1);
+                }
             });
+            // Fade non-hovered bars
+            if (hasBarSeries) {
+                barSeries.forEach((s) => {
+                    const sanitizedKey = sanitizeForCSS(s.dataKey);
+                    svg.selectAll(`.bar-${sanitizedKey}`)
+                        .style('opacity', (_, i) => i === closestIndex ? 1 : 0.5);
+                });
+            }
             // Build tooltip content
             let content;
             if (customFormatter) {
@@ -149,11 +199,28 @@ export class Tooltip {
             }
             // Position tooltip relative to the data point
             const svgRect = svg.node().getBoundingClientRect();
-            const tooltipX = svgRect.left + window.scrollX + xPos + 10;
-            const tooltipY = svgRect.top +
-                window.scrollY +
-                y(parseValue(dataPoint[series[0].dataKey])) -
-                10;
+            let tooltipX;
+            let tooltipY;
+            if (isHorizontal) {
+                // Horizontal: position near bar end (X = value, Y = category)
+                tooltipX =
+                    svgRect.left +
+                        window.scrollX +
+                        x(parseValue(dataPoint[series[0].dataKey])) +
+                        10;
+                tooltipY =
+                    svgRect.top + window.scrollY + dataPointPosition - 10;
+            }
+            else {
+                // Vertical: position near data point (X = category, Y = value)
+                tooltipX =
+                    svgRect.left + window.scrollX + dataPointPosition + 10;
+                tooltipY =
+                    svgRect.top +
+                        window.scrollY +
+                        y(parseValue(dataPoint[series[0].dataKey])) -
+                        10;
+            }
             tooltip
                 .style('visibility', 'visible')
                 .html(content)
@@ -163,6 +230,13 @@ export class Tooltip {
             .on('mouseout', () => {
             tooltip.style('visibility', 'hidden');
             focusCircles.forEach((circle) => circle.style('opacity', 0));
+            // Reset bar opacity
+            if (hasBarSeries) {
+                barSeries.forEach((s) => {
+                    const sanitizedKey = sanitizeForCSS(s.dataKey);
+                    svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', 1);
+                });
+            }
         });
     }
     cleanup() {

package/types.d.ts

@@ -1,7 +1,10 @@
-export type DataItem = {
-    [key: string]: any;
-};
+export type DataValue = string | number | boolean | Date | null | undefined;
+export type DataItem = Record<string, any>;
 export type ExportFormat = 'svg' | 'json';
+export type ExportOptions = {
+    download?: boolean;
+    filename?: string;
+};
 export type ColorPalette = string[];
 export type ChartTheme = {
     width: number;
@@ -88,23 +91,31 @@ export declare function getSeriesColor(series: {
     stroke?: string;
     fill?: string;
 }): string;
+export type LabelOversizedBehavior = 'truncate' | 'wrap' | 'hide';
 export type XAxisConfig = {
     dataKey?: string;
     rotatedLabels?: boolean;
+    maxLabelWidth?: number;
+    oversizedBehavior?: LabelOversizedBehavior;
+    tickFormat?: string | ((value: number) => string) | null;
 };
 export type YAxisConfig = {
-    tickFormat?: string | ((value: any) => string) | null;
+    tickFormat?: string | ((value: number) => string) | null;
+    rotatedLabels?: boolean;
+    maxLabelWidth?: number;
+    oversizedBehavior?: LabelOversizedBehavior;
 };
 export type GridConfig = {
     horizontal?: boolean;
     vertical?: boolean;
 };
 export type TooltipConfig = {
-    formatter?: (dataKey: string, value: any, data: DataItem) => string;
+    formatter?: (dataKey: string, value: DataValue, data: DataItem) => string;
     labelFormatter?: (label: string, data: DataItem) => string;
     customFormatter?: (data: DataItem, series: {
         dataKey: string;
-        [key: string]: any;
+        stroke?: string;
+        fill?: string;
     }[]) => string;
 };
 export type LegendConfig = {
@@ -122,10 +133,12 @@ export type TitleConfig = {
     marginBottom?: number;
 };
 export type ScaleType = 'band' | 'linear' | 'time' | 'log';
+export type D3Scale = any;
+export type ScaleDomainValue = string | number | Date;
 export type ScaleConfig = {
     type: ScaleType;
-    domain?: any[];
-    range?: any[];
+    domain?: ScaleDomainValue[];
+    range?: number[];
     padding?: number;
     nice?: boolean;
     min?: number;