@internetstiftelsen/charts 0.0.9 → 0.1.0

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':
@@ -79,11 +80,12 @@ export class Line {
             .attr('stroke-width', lineStrokeWidth)
             .attr('d', lineGenerator);
         // Add data point circles
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
         plotGroup
-            .selectAll(`.circle-${this.dataKey.replace(/\s+/g, '-')}`)
+            .selectAll(`.circle-${sanitizedKey}`)
             .data(data)
             .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)
@@ -107,7 +109,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 +127,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.0",
     "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,30 @@ 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;
 };
 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 +132,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;

package/utils.d.ts

@@ -1,2 +1,62 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Sanitizes a string to be used as a CSS class name or ID.
+ * Removes or replaces invalid characters for CSS selectors.
+ *
+ * @param str - The string to sanitize
+ * @returns A valid CSS class/ID string
+ */
+export declare function sanitizeForCSS(str: string): string;
+/**
+ * Measures the width of text in pixels using an SVG text element.
+ *
+ * @param text - The text to measure
+ * @param fontSize - Font size (e.g., '14px' or 14)
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight (optional)
+ * @param svg - SVG element to use for measurement
+ * @returns Width in pixels
+ */
+export declare function measureTextWidth(text: string, fontSize: string | number, fontFamily: string, fontWeight: string | undefined, svg: SVGSVGElement): number;
+/**
+ * Truncates text to fit within a maximum width, adding ellipsis if needed.
+ * Uses binary search for efficiency.
+ *
+ * @param text - The text to truncate
+ * @param maxWidth - Maximum width in pixels
+ * @param fontSize - Font size
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight
+ * @param svg - SVG element for measurement
+ * @returns Object with truncated text and whether truncation occurred
+ */
+export declare function truncateText(text: string, maxWidth: number, fontSize: string | number, fontFamily: string, fontWeight: string, svg: SVGSVGElement): {
+    text: string;
+    truncated: boolean;
+};
+/**
+ * Breaks a word into multiple lines by character to fit within maxWidth.
+ * Uses binary search to find optimal break points.
+ *
+ * @param word - The word to break
+ * @param maxWidth - Maximum width in pixels
+ * @param fontSize - Font size
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight
+ * @param svg - SVG element for measurement
+ * @returns Array of line segments
+ */
+export declare function breakWord(word: string, maxWidth: number, fontSize: string | number, fontFamily: string, fontWeight: string, svg: SVGSVGElement): string[];
+/**
+ * Wraps text into multiple lines to fit within a maximum width.
+ *
+ * @param text - The text to wrap
+ * @param maxWidth - Maximum width in pixels
+ * @param fontSize - Font size
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight
+ * @param svg - SVG element for measurement
+ * @returns Array of lines
+ */
+export declare function wrapText(text: string, maxWidth: number, fontSize: string | number, fontFamily: string, fontWeight: string, svg: SVGSVGElement): string[];

package/utils.js

@@ -3,3 +3,168 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+/**
+ * Sanitizes a string to be used as a CSS class name or ID.
+ * Removes or replaces invalid characters for CSS selectors.
+ *
+ * @param str - The string to sanitize
+ * @returns A valid CSS class/ID string
+ */
+export function sanitizeForCSS(str) {
+    // Replace spaces and special characters with hyphens
+    // Preserve Unicode letters (including Swedish characters), numbers, hyphens, and underscores
+    return str
+        .replace(/[^\p{L}\p{N}_-]/gu, '-') // Replace invalid chars with hyphens (preserves Unicode letters)
+        .replace(/-+/g, '-') // Replace multiple hyphens with single
+        .replace(/^-+|-+$/g, '') // Remove leading/trailing hyphens
+        .toLowerCase(); // Convert to lowercase for consistency
+}
+/**
+ * Measures the width of text in pixels using an SVG text element.
+ *
+ * @param text - The text to measure
+ * @param fontSize - Font size (e.g., '14px' or 14)
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight (optional)
+ * @param svg - SVG element to use for measurement
+ * @returns Width in pixels
+ */
+export function measureTextWidth(text, fontSize, fontFamily, fontWeight = 'normal', svg) {
+    const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    textEl.setAttribute('font-size', typeof fontSize === 'number' ? `${fontSize}px` : fontSize);
+    textEl.setAttribute('font-family', fontFamily);
+    textEl.setAttribute('font-weight', fontWeight);
+    textEl.textContent = text;
+    textEl.style.visibility = 'hidden';
+    svg.appendChild(textEl);
+    const width = textEl.getBBox().width;
+    svg.removeChild(textEl);
+    return width;
+}
+/**
+ * Truncates text to fit within a maximum width, adding ellipsis if needed.
+ * Uses binary search for efficiency.
+ *
+ * @param text - The text to truncate
+ * @param maxWidth - Maximum width in pixels
+ * @param fontSize - Font size
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight
+ * @param svg - SVG element for measurement
+ * @returns Object with truncated text and whether truncation occurred
+ */
+export function truncateText(text, maxWidth, fontSize, fontFamily, fontWeight, svg) {
+    const fullWidth = measureTextWidth(text, fontSize, fontFamily, fontWeight, svg);
+    if (fullWidth <= maxWidth) {
+        return { text, truncated: false };
+    }
+    const ellipsis = '…';
+    const ellipsisWidth = measureTextWidth(ellipsis, fontSize, fontFamily, fontWeight, svg);
+    const targetWidth = maxWidth - ellipsisWidth;
+    if (targetWidth <= 0) {
+        return { text: ellipsis, truncated: true };
+    }
+    // Binary search to find the maximum number of characters that fit
+    let low = 0;
+    let high = text.length;
+    let result = '';
+    while (low <= high) {
+        const mid = Math.floor((low + high) / 2);
+        const substring = text.substring(0, mid);
+        const width = measureTextWidth(substring, fontSize, fontFamily, fontWeight, svg);
+        if (width <= targetWidth) {
+            result = substring;
+            low = mid + 1;
+        }
+        else {
+            high = mid - 1;
+        }
+    }
+    return { text: result + ellipsis, truncated: true };
+}
+/**
+ * Breaks a word into multiple lines by character to fit within maxWidth.
+ * Uses binary search to find optimal break points.
+ *
+ * @param word - The word to break
+ * @param maxWidth - Maximum width in pixels
+ * @param fontSize - Font size
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight
+ * @param svg - SVG element for measurement
+ * @returns Array of line segments
+ */
+export function breakWord(word, maxWidth, fontSize, fontFamily, fontWeight, svg) {
+    const segments = [];
+    let remaining = word;
+    while (remaining.length > 0) {
+        // Binary search to find max characters that fit
+        let low = 1;
+        let high = remaining.length;
+        let fitLength = 1;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            const substring = remaining.substring(0, mid);
+            const width = measureTextWidth(substring, fontSize, fontFamily, fontWeight, svg);
+            if (width <= maxWidth) {
+                fitLength = mid;
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        // Ensure at least one character per line to avoid infinite loop
+        fitLength = Math.max(1, fitLength);
+        segments.push(remaining.substring(0, fitLength));
+        remaining = remaining.substring(fitLength);
+    }
+    return segments;
+}
+/**
+ * Wraps text into multiple lines to fit within a maximum width.
+ *
+ * @param text - The text to wrap
+ * @param maxWidth - Maximum width in pixels
+ * @param fontSize - Font size
+ * @param fontFamily - Font family
+ * @param fontWeight - Font weight
+ * @param svg - SVG element for measurement
+ * @returns Array of lines
+ */
+export function wrapText(text, maxWidth, fontSize, fontFamily, fontWeight, svg) {
+    const words = text.split(/\s+/);
+    const lines = [];
+    let currentLine = '';
+    for (const word of words) {
+        const testLine = currentLine ? `${currentLine} ${word}` : word;
+        const width = measureTextWidth(testLine, fontSize, fontFamily, fontWeight, svg);
+        if (width <= maxWidth) {
+            currentLine = testLine;
+        }
+        else {
+            if (currentLine) {
+                lines.push(currentLine);
+            }
+            // Check if single word exceeds maxWidth
+            const wordWidth = measureTextWidth(word, fontSize, fontFamily, fontWeight, svg);
+            if (wordWidth > maxWidth) {
+                // Break the word into multiple lines by character
+                const wordSegments = breakWord(word, maxWidth, fontSize, fontFamily, fontWeight, svg);
+                // Add all segments except the last as complete lines
+                for (let i = 0; i < wordSegments.length - 1; i++) {
+                    lines.push(wordSegments[i]);
+                }
+                // The last segment becomes the current line (may be combined with next word)
+                currentLine = wordSegments[wordSegments.length - 1];
+            }
+            else {
+                currentLine = word;
+            }
+        }
+    }
+    if (currentLine) {
+        lines.push(currentLine);
+    }
+    return lines.length > 0 ? lines : [text];
+}

package/validation.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem } from './types.js';
+import type { DataItem, ScaleDomainValue } from './types.js';
 export declare class ChartValidationError extends Error {
     constructor(message: string);
 }
@@ -9,7 +9,7 @@ export declare class ChartValidator {
     /**
      * Validates that data is an array and not empty
      */
-    static validateData(data: any): asserts data is DataItem[];
+    static validateData(data: unknown): asserts data is DataItem[];
     /**
      * Validates that the specified dataKey exists in all data items
      */
@@ -21,7 +21,7 @@ export declare class ChartValidator {
     /**
      * Validates scale configuration
      */
-    static validateScaleConfig(scaleType: string, domain: any[] | undefined): void;
+    static validateScaleConfig(scaleType: string, domain: ScaleDomainValue[] | undefined): void;
     /**
      * Warns about potential issues without throwing errors
      */

package/x-axis.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { XAxisConfig, ChartTheme } from './types.js';
+import type { XAxisConfig, ChartTheme, D3Scale } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class XAxis implements LayoutAwareComponent {
     readonly type: "xAxis";
@@ -7,10 +7,16 @@ export declare class XAxis implements LayoutAwareComponent {
     private readonly rotatedLabels;
     private readonly tickPadding;
     private readonly fontSize;
+    private readonly maxLabelWidth?;
+    private readonly oversizedBehavior;
+    private wrapLineCount;
     constructor(config?: XAxisConfig);
     /**
      * Returns the space required by the x-axis
      */
     getRequiredSpace(): ComponentSpace;
-    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: any, theme: ChartTheme, yPosition: number): void;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, x: D3Scale, theme: ChartTheme, yPosition: number): void;
+    private applyLabelConstraints;
+    private wrapTextElement;
+    private addTitleTooltip;
 }

package/x-axis.js

@@ -1,4 +1,5 @@
 import { axisBottom } from 'd3';
+import { measureTextWidth, truncateText, wrapText } from './utils.js';
 export class XAxis {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -31,8 +32,28 @@ export class XAxis {
             writable: true,
             value: 14
         });
+        Object.defineProperty(this, "maxLabelWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "oversizedBehavior", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapLineCount", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1
+        });
         this.dataKey = config?.dataKey;
         this.rotatedLabels = config?.rotatedLabels ?? false;
+        this.maxLabelWidth = config?.maxLabelWidth;
+        this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
     }
     /**
      * Returns the space required by the x-axis
@@ -41,7 +62,11 @@ export class XAxis {
         // Height = tick padding + font size + some extra space for descenders
         // Rotated labels need more vertical space (roughly 2.5x for -45deg rotation)
         const baseHeight = this.tickPadding + this.fontSize + 5;
-        const height = this.rotatedLabels ? baseHeight * 2.5 : baseHeight;
+        let height = this.rotatedLabels ? baseHeight * 2.5 : baseHeight;
+        // Account for wrapped text height (multiply by estimated line count)
+        if (this.maxLabelWidth && this.oversizedBehavior === 'wrap' && this.wrapLineCount > 1) {
+            height += (this.wrapLineCount - 1) * this.fontSize * 1.2;
+        }
         return {
             width: 0, // X-axis spans full width
             height,
@@ -51,6 +76,7 @@ export class XAxis {
     render(svg, x, theme, yPosition) {
         const axis = svg
             .append('g')
+            .attr('class', 'x-axis')
             .attr('transform', `translate(0,${yPosition})`)
             .call(axisBottom(x)
             .tickSizeOuter(0)
@@ -60,6 +86,10 @@ export class XAxis {
             .attr('font-family', theme.axis.fontFamily)
             .attr('font-weight', theme.axis.fontWeight || 'normal')
             .attr('stroke', 'none');
+        // Apply label constraints before rotation
+        if (this.maxLabelWidth) {
+            this.applyLabelConstraints(axis, svg.node(), theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal');
+        }
         // Apply rotation to labels if enabled
         if (this.rotatedLabels) {
             axis.selectAll('text')
@@ -68,4 +98,60 @@ export class XAxis {
         }
         axis.selectAll('.domain').remove();
     }
+    applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
+        if (!this.maxLabelWidth)
+            return;
+        const maxWidth = this.maxLabelWidth;
+        const behavior = this.oversizedBehavior;
+        axisGroup.selectAll('text').each((_d, i, nodes) => {
+            const textEl = nodes[i];
+            const originalText = textEl.textContent || '';
+            const textWidth = measureTextWidth(originalText, fontSize, fontFamily, fontWeight, svg);
+            if (textWidth <= maxWidth) {
+                return;
+            }
+            switch (behavior) {
+                case 'truncate': {
+                    const result = truncateText(originalText, maxWidth, fontSize, fontFamily, fontWeight, svg);
+                    textEl.textContent = result.text;
+                    if (result.truncated) {
+                        this.addTitleTooltip(textEl, originalText);
+                    }
+                    break;
+                }
+                case 'wrap': {
+                    const lines = wrapText(originalText, maxWidth, fontSize, fontFamily, fontWeight, svg);
+                    this.wrapTextElement(textEl, lines, originalText);
+                    break;
+                }
+                case 'hide': {
+                    textEl.style.visibility = 'hidden';
+                    break;
+                }
+            }
+        });
+    }
+    wrapTextElement(textEl, lines, originalText) {
+        // Clear existing content
+        textEl.textContent = '';
+        const lineHeight = this.fontSize * 1.2;
+        // Update wrap line count for height calculation
+        this.wrapLineCount = Math.max(this.wrapLineCount, lines.length);
+        lines.forEach((line, i) => {
+            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            tspan.textContent = line;
+            tspan.setAttribute('x', textEl.getAttribute('x') || '0');
+            tspan.setAttribute('dy', i === 0 ? '0' : `${lineHeight}px`);
+            textEl.appendChild(tspan);
+        });
+        // Add tooltip with full text
+        if (lines.length > 1) {
+            this.addTitleTooltip(textEl, originalText);
+        }
+    }
+    addTitleTooltip(textEl, text) {
+        const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+        title.textContent = text;
+        textEl.insertBefore(title, textEl.firstChild);
+    }
 }

package/xy-chart.js

@@ -124,7 +124,7 @@ export class XYChart extends BaseChart {
         // Render tooltip
         if (this.tooltip && this.x && this.y) {
             this.tooltip.initialize(this.theme);
-            this.tooltip.attachToArea(this.svg, sortedData, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this));
+            this.tooltip.attachToArea(this.svg, sortedData, this.series, xKey, this.x, this.y, this.theme, this.plotArea, this.parseValue.bind(this), this.isHorizontalOrientation());
         }
         // Render legend if present
         if (this.legend) {

package/y-axis.d.ts

@@ -1,15 +1,21 @@
 import { type Selection } from 'd3';
-import type { ChartTheme, YAxisConfig } from './types.js';
+import type { ChartTheme, YAxisConfig, D3Scale } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
 export declare class YAxis implements LayoutAwareComponent {
     readonly type: "yAxis";
     private readonly tickPadding;
+    private readonly fontSize;
     private readonly maxLabelWidth;
     private readonly tickFormat;
+    private readonly rotatedLabels;
+    private readonly oversizedBehavior;
     constructor(config?: YAxisConfig);
     /**
      * Returns the space required by the y-axis
      */
     getRequiredSpace(): ComponentSpace;
-    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, y: any, theme: ChartTheme, xPosition: number): void;
+    render(svg: Selection<SVGSVGElement, undefined, null, undefined>, y: D3Scale, theme: ChartTheme, xPosition: number): void;
+    private applyLabelConstraints;
+    private wrapTextElement;
+    private addTitleTooltip;
 }

package/y-axis.js

@@ -1,4 +1,5 @@
 import { axisLeft } from 'd3';
+import { measureTextWidth, truncateText, wrapText } from './utils.js';
 export class YAxis {
     constructor(config) {
         Object.defineProperty(this, "type", {
@@ -13,27 +14,52 @@ export class YAxis {
             writable: true,
             value: 10
         });
+        Object.defineProperty(this, "fontSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 14
+        });
         Object.defineProperty(this, "maxLabelWidth", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 40
-        }); // Estimated max width for Y-axis labels
+            value: void 0
+        });
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Object.defineProperty(this, "tickFormat", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "rotatedLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "oversizedBehavior", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         this.tickFormat = config?.tickFormat ?? null;
+        this.rotatedLabels = config?.rotatedLabels ?? false;
+        this.maxLabelWidth = config?.maxLabelWidth ?? 40; // Default 40 for backward compatibility
+        this.oversizedBehavior = config?.oversizedBehavior ?? 'truncate';
     }
     /**
      * Returns the space required by the y-axis
      */
     getRequiredSpace() {
         // Width = max label width + tick padding
+        // Rotated labels need less width (cos(45°) ≈ 0.7 of horizontal width)
+        const baseWidth = this.maxLabelWidth + this.tickPadding;
+        const width = this.rotatedLabels ? baseWidth * 0.7 : baseWidth;
         return {
-            width: this.maxLabelWidth + this.tickPadding,
+            width,
             height: 0, // Y-axis spans full height
             position: 'left',
         };
@@ -52,13 +78,83 @@ export class YAxis {
         else {
             axis.ticks(5);
         }
-        svg.append('g')
+        const axisGroup = svg
+            .append('g')
+            .attr('class', 'y-axis')
             .attr('transform', `translate(${xPosition},0)`)
             .call(axis)
             .attr('font-size', theme.axis.fontSize)
             .attr('font-family', theme.axis.fontFamily)
-            .attr('font-weight', theme.axis.fontWeight || 'normal')
-            .selectAll('.domain')
-            .remove();
+            .attr('font-weight', theme.axis.fontWeight || 'normal');
+        // Apply label constraints before rotation
+        this.applyLabelConstraints(axisGroup, svg.node(), theme.axis.fontSize, theme.axis.fontFamily, theme.axis.fontWeight || 'normal');
+        // Apply rotation to labels if enabled
+        if (this.rotatedLabels) {
+            axisGroup
+                .selectAll('text')
+                .style('text-anchor', 'end')
+                .attr('transform', 'rotate(-45)');
+        }
+        axisGroup.selectAll('.domain').remove();
+    }
+    applyLabelConstraints(axisGroup, svg, fontSize, fontFamily, fontWeight) {
+        const maxWidth = this.maxLabelWidth;
+        const behavior = this.oversizedBehavior;
+        axisGroup.selectAll('text').each((_d, i, nodes) => {
+            const textEl = nodes[i];
+            const originalText = textEl.textContent || '';
+            const textWidth = measureTextWidth(originalText, fontSize, fontFamily, fontWeight, svg);
+            if (textWidth <= maxWidth) {
+                return;
+            }
+            switch (behavior) {
+                case 'truncate': {
+                    const result = truncateText(originalText, maxWidth, fontSize, fontFamily, fontWeight, svg);
+                    textEl.textContent = result.text;
+                    if (result.truncated) {
+                        this.addTitleTooltip(textEl, originalText);
+                    }
+                    break;
+                }
+                case 'wrap': {
+                    const lines = wrapText(originalText, maxWidth, fontSize, fontFamily, fontWeight, svg);
+                    this.wrapTextElement(textEl, lines, originalText);
+                    break;
+                }
+                case 'hide': {
+                    textEl.style.visibility = 'hidden';
+                    break;
+                }
+            }
+        });
+    }
+    wrapTextElement(textEl, lines, originalText) {
+        // Clear existing content
+        textEl.textContent = '';
+        const lineHeight = this.fontSize * 1.2;
+        // For Y-axis, center wrapped lines vertically around the tick position
+        const totalHeight = (lines.length - 1) * lineHeight;
+        const startOffset = -totalHeight / 2;
+        lines.forEach((line, i) => {
+            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            tspan.textContent = line;
+            tspan.setAttribute('x', textEl.getAttribute('x') || '0');
+            if (i === 0) {
+                tspan.setAttribute('dy', `${startOffset}px`);
+            }
+            else {
+                tspan.setAttribute('dy', `${lineHeight}px`);
+            }
+            textEl.appendChild(tspan);
+        });
+        // Add tooltip with full text
+        if (lines.length > 1) {
+            this.addTitleTooltip(textEl, originalText);
+        }
+    }
+    addTitleTooltip(textEl, text) {
+        const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+        title.textContent = text;
+        textEl.insertBefore(title, textEl.firstChild);
     }
 }