@internetstiftelsen/charts 0.9.0 → 0.9.1

package/{title.d.ts → dist/title.d.ts}

@@ -14,7 +14,7 @@ export declare class Title implements LayoutAwareComponent<TitleConfigBase> {
     private readonly marginBottom;
     constructor(config: TitleConfig);
     getExportConfig(): TitleConfigBase;
-    createExportComponent(override?: Partial<TitleConfigBase>): LayoutAwareComponent;
+    createExportComponent(override?: Partial<TitleConfigBase>): LayoutAwareComponent<TitleConfigBase>;
     /**
      * Returns the space required by the title
      */

package/{tooltip.d.ts → dist/tooltip.d.ts}

@@ -19,7 +19,7 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     private tooltipDiv;
     constructor(config?: TooltipConfig);
     getExportConfig(): TooltipConfigBase;
-    createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<TooltipConfigBase>): ChartComponent<TooltipConfigBase>;
     initialize(theme: ChartTheme): void;
     attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar | Area)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: Line | Bar | Area, dataPoint: DataItem, index: number) => number): void;
     cleanup(): void;

package/{tooltip.js → dist/tooltip.js}

@@ -93,8 +93,23 @@ export class Tooltip {
         }
         return parseValue(rawValue);
     }) {
-        if (!this.tooltipDiv)
+        if (!this.tooltipDiv) {
             return;
+        }
+        const normalizeFormatterValue = (value) => {
+            if (value === null ||
+                value === undefined ||
+                typeof value === 'string' ||
+                typeof value === 'number' ||
+                typeof value === 'boolean' ||
+                value instanceof Date) {
+                return value;
+            }
+            return String(value);
+        };
+        if (data.length === 0) {
+            return;
+        }
         const tooltip = this.tooltipDiv;
         const formatter = this.formatter;
         const labelFormatter = this.labelFormatter;
@@ -122,6 +137,72 @@ export class Tooltip {
             const scaled = y(getCategoryScaleValue(yValue, categoryScaleType));
             return (scaled || 0) + (y.bandwidth ? y.bandwidth() / 2 : 0);
         };
+        const stripHtml = (content) => {
+            return content
+                .replace(/<br\s*\/?>/gi, '. ')
+                .replace(/<[^>]+>/g, ' ')
+                .replace(/\s+/g, ' ')
+                .trim();
+        };
+        const buildTooltipContent = (dataPoint) => {
+            if (customFormatter) {
+                return customFormatter(dataPoint, series);
+            }
+            const labelValue = dataPoint[xKey];
+            const label = labelFormatter
+                ? labelFormatter(String(labelValue), dataPoint)
+                : String(labelValue);
+            let content = `<strong>${label}</strong><br/>`;
+            series.forEach((s) => {
+                const value = dataPoint[s.dataKey];
+                if (formatter) {
+                    content +=
+                        formatter(s.dataKey, normalizeFormatterValue(value), dataPoint) + '<br/>';
+                    return;
+                }
+                content += `${s.dataKey}: ${value}<br/>`;
+            });
+            return content;
+        };
+        const buildAccessibleLabel = (dataPoint) => {
+            if (customFormatter) {
+                return stripHtml(customFormatter(dataPoint, series));
+            }
+            const labelValue = dataPoint[xKey];
+            const label = labelFormatter
+                ? labelFormatter(String(labelValue), dataPoint)
+                : String(labelValue);
+            const parts = [label];
+            series.forEach((s) => {
+                const value = dataPoint[s.dataKey];
+                if (formatter) {
+                    parts.push(stripHtml(formatter(s.dataKey, normalizeFormatterValue(value), dataPoint)));
+                    return;
+                }
+                parts.push(`${s.dataKey}: ${value === null || value === undefined
+                    ? 'no data'
+                    : value}`);
+            });
+            return parts.join('. ');
+        };
+        const isTooltipFocusTarget = (element) => {
+            return (element instanceof SVGElement &&
+                element.classList.contains('tooltip-focus-target'));
+        };
+        const dataPointPositions = data.map((dataPoint) => isHorizontal ? getYPosition(dataPoint) : getXPosition(dataPoint));
+        const getClosestIndexFromPointer = (mouseX, mouseY) => {
+            const pointerPosition = isHorizontal ? mouseY : mouseX;
+            let closestIndex = 0;
+            let minDistance = Math.abs(pointerPosition - dataPointPositions[0]);
+            for (let i = 1; i < dataPointPositions.length; i++) {
+                const distance = Math.abs(pointerPosition - dataPointPositions[i]);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    closestIndex = i;
+                }
+            }
+            return closestIndex;
+        };
         // Create overlay rect for mouse tracking using plot area bounds
         const overlay = svg
             .append('rect')
@@ -130,6 +211,7 @@ export class Tooltip {
             .attr('y', plotArea.top)
             .attr('width', plotArea.width)
             .attr('height', plotArea.height)
+            .attr('aria-hidden', 'true')
             .style('fill', 'none')
             .style('pointer-events', 'all');
         const lineSeries = series.filter((s) => s.type === 'line' || s.type === 'area');
@@ -144,39 +226,23 @@ export class Tooltip {
                 .attr('fill', theme.line.point.color || seriesColor)
                 .attr('stroke', theme.line.point.strokeColor || seriesColor)
                 .attr('stroke-width', theme.line.point.strokeWidth)
+                .attr('aria-hidden', 'true')
                 .style('opacity', 0)
                 .style('pointer-events', 'none');
         });
-        overlay
-            .on('mousemove', (event) => {
-            const [mouseX, mouseY] = pointer(event, svg.node());
-            let closestIndex = 0;
-            let dataPointPosition;
-            if (isHorizontal) {
-                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 {
-                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 clearVisualState = () => {
+            focusCircles.forEach((circle) => circle.style('opacity', 0));
+            if (!hasBarSeries) {
+                return;
             }
+            barSeries.forEach((s) => {
+                const sanitizedKey = sanitizeForCSS(s.dataKey);
+                svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', 1);
+            });
+        };
+        const showTooltipAtIndex = (closestIndex) => {
             const dataPoint = data[closestIndex];
+            const dataPointPosition = dataPointPositions[closestIndex];
             lineSeries.forEach((s, i) => {
                 const value = resolveSeriesValue(s, dataPoint, closestIndex);
                 if (!Number.isFinite(value)) {
@@ -185,16 +251,15 @@ export class Tooltip {
                 }
                 if (isHorizontal) {
                     focusCircles[i]
-                        .attr('cx', x(value))
+                        .attr('cx', x(value) ?? 0)
                         .attr('cy', dataPointPosition)
                         .style('opacity', 1);
+                    return;
                 }
-                else {
-                    focusCircles[i]
-                        .attr('cx', dataPointPosition)
-                        .attr('cy', y(value))
-                        .style('opacity', 1);
-                }
+                focusCircles[i]
+                    .attr('cx', dataPointPosition)
+                    .attr('cy', y(value) ?? 0)
+                    .style('opacity', 1);
             });
             if (hasBarSeries) {
                 barSeries.forEach((s) => {
@@ -202,29 +267,9 @@ export class Tooltip {
                     svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', (_, i) => (i === closestIndex ? 1 : 0.5));
                 });
             }
-            let content;
-            if (customFormatter) {
-                content = customFormatter(dataPoint, series);
-            }
-            else {
-                const labelValue = dataPoint[xKey];
-                const label = labelFormatter
-                    ? labelFormatter(String(labelValue), dataPoint)
-                    : String(labelValue);
-                content = `<strong>${label}</strong><br/>`;
-                series.forEach((s) => {
-                    const value = dataPoint[s.dataKey];
-                    if (formatter) {
-                        content +=
-                            formatter(s.dataKey, value, dataPoint) +
-                                '<br/>';
-                    }
-                    else {
-                        content += `${s.dataKey}: ${value}<br/>`;
-                    }
-                });
-            }
-            tooltip.style('visibility', 'visible').html(content);
+            tooltip
+                .style('visibility', 'visible')
+                .html(buildTooltipContent(dataPoint));
             const tooltipNode = tooltip.node();
             const tooltipRect = tooltipNode.getBoundingClientRect();
             const tooltipWidth = tooltipRect.width;
@@ -257,10 +302,7 @@ export class Tooltip {
                 const maxY = y(minValue);
                 const midY = (minY + maxY) / 2;
                 tooltipX =
-                    svgRect.left +
-                        window.scrollX +
-                        dataPointPosition +
-                        offsetX;
+                    svgRect.left + window.scrollX + dataPointPosition + offsetX;
                 tooltipY =
                     svgRect.top + window.scrollY + midY - tooltipHeight / 2;
             }
@@ -285,23 +327,146 @@ export class Tooltip {
                 }
             }
             tooltipX = Math.max(10, tooltipX);
-            tooltipY = Math.max(10, Math.min(tooltipY, window.innerHeight +
-                window.scrollY -
-                tooltipHeight -
-                10));
+            tooltipY = Math.max(10, Math.min(tooltipY, window.innerHeight + window.scrollY - tooltipHeight - 10));
             tooltip
                 .style('left', `${tooltipX}px`)
                 .style('top', `${tooltipY}px`);
+        };
+        const hideTooltip = () => {
+            tooltip.style('visibility', 'hidden');
+            clearVisualState();
+        };
+        const getFocusTargetBounds = (index) => {
+            if (isHorizontal) {
+                if (y.bandwidth) {
+                    const targetHeight = y.bandwidth();
+                    return {
+                        x: plotArea.left,
+                        y: dataPointPositions[index] - targetHeight / 2,
+                        width: plotArea.width,
+                        height: targetHeight,
+                    };
+                }
+                const top = index === 0
+                    ? plotArea.top
+                    : (dataPointPositions[index - 1] +
+                        dataPointPositions[index]) /
+                        2;
+                const bottom = index === dataPointPositions.length - 1
+                    ? plotArea.bottom
+                    : (dataPointPositions[index] +
+                        dataPointPositions[index + 1]) /
+                        2;
+                return {
+                    x: plotArea.left,
+                    y: top,
+                    width: plotArea.width,
+                    height: bottom - top,
+                };
+            }
+            if (x.bandwidth) {
+                const targetWidth = x.bandwidth();
+                return {
+                    x: dataPointPositions[index] - targetWidth / 2,
+                    y: plotArea.top,
+                    width: targetWidth,
+                    height: plotArea.height,
+                };
+            }
+            const left = index === 0
+                ? plotArea.left
+                : (dataPointPositions[index - 1] +
+                    dataPointPositions[index]) /
+                    2;
+            const right = index === dataPointPositions.length - 1
+                ? plotArea.right
+                : (dataPointPositions[index] +
+                    dataPointPositions[index + 1]) /
+                    2;
+            return {
+                x: left,
+                y: plotArea.top,
+                width: right - left,
+                height: plotArea.height,
+            };
+        };
+        overlay
+            .on('mousemove', (event) => {
+            const [mouseX, mouseY] = pointer(event, svg.node());
+            showTooltipAtIndex(getClosestIndexFromPointer(mouseX, mouseY));
         })
             .on('mouseout', () => {
-            tooltip.style('visibility', 'hidden');
-            focusCircles.forEach((circle) => circle.style('opacity', 0));
-            if (hasBarSeries) {
-                barSeries.forEach((s) => {
-                    const sanitizedKey = sanitizeForCSS(s.dataKey);
-                    svg.selectAll(`.bar-${sanitizedKey}`).style('opacity', 1);
-                });
+            if (isTooltipFocusTarget(document.activeElement)) {
+                return;
+            }
+            hideTooltip();
+        });
+        const focusTargets = svg
+            .append('g')
+            .attr('class', 'tooltip-focus-targets')
+            .selectAll('rect')
+            .data(data)
+            .join('rect')
+            .attr('class', 'tooltip-focus-target')
+            .attr('data-index', (_, i) => i)
+            .attr('x', (_, i) => getFocusTargetBounds(i).x)
+            .attr('y', (_, i) => getFocusTargetBounds(i).y)
+            .attr('width', (_, i) => getFocusTargetBounds(i).width)
+            .attr('height', (_, i) => getFocusTargetBounds(i).height)
+            .attr('tabindex', 0)
+            .attr('fill', 'transparent')
+            .attr('stroke', 'none')
+            .attr('stroke-width', 0)
+            .attr('aria-label', (dataPoint) => buildAccessibleLabel(dataPoint))
+            .style('pointer-events', 'none');
+        const focusTargetNodes = focusTargets.nodes();
+        focusTargets
+            .on('focus', function () {
+            const currentIndex = focusTargetNodes.indexOf(this);
+            if (currentIndex === -1) {
+                return;
+            }
+            select(this).attr('stroke', '#111827').attr('stroke-width', 2);
+            showTooltipAtIndex(currentIndex);
+        })
+            .on('blur', function (event) {
+            select(this).attr('stroke', 'none').attr('stroke-width', 0);
+            if (isTooltipFocusTarget(event.relatedTarget)) {
+                return;
+            }
+            hideTooltip();
+        })
+            .on('keydown', function (event) {
+            const currentIndex = focusTargetNodes.indexOf(this);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex = null;
+            switch (event.key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    nextIndex = currentIndex + 1;
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    nextIndex = currentIndex - 1;
+                    break;
+                case 'Home':
+                    nextIndex = 0;
+                    break;
+                case 'End':
+                    nextIndex = focusTargetNodes.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            if (nextIndex === null ||
+                nextIndex < 0 ||
+                nextIndex >= focusTargetNodes.length) {
+                return;
             }
+            event.preventDefault();
+            focusTargetNodes[nextIndex].focus();
         });
     }
     cleanup() {

package/{types.d.ts → dist/types.d.ts}

@@ -2,7 +2,7 @@ export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
 };
 export type DataValue = string | number | boolean | Date | null | undefined;
-export type DataItem = Record<string, any>;
+export type DataItem = Record<string, unknown>;
 export type GroupedDataGroup = {
     group: string;
     data: DataItem[];
@@ -37,8 +37,6 @@ export type ExportHooks<TConfig = Record<string, unknown>> = {
 };
 export type ColorPalette = string[];
 export type ChartTheme = {
-    width: number;
-    height: number;
     fontFamily: string;
     margins: {
         top: number;
@@ -53,11 +51,11 @@ export type ChartTheme = {
     colorPalette: ColorPalette;
     axis: {
         fontFamily: string;
-        fontSize: string;
+        fontSize: number;
         fontWeight?: string;
         groupLabel?: {
             fontFamily?: string;
-            fontSize?: string;
+            fontSize?: number;
             fontWeight?: string;
             color?: string;
         };
@@ -115,10 +113,22 @@ export type ChartTheme = {
         };
     };
 };
-export type ResponsiveBreakpoints = Record<string, number>;
+export type ResolvedChartTheme = ChartTheme & {
+    width: number;
+    height: number;
+};
+export type ResponsiveBreakpointConfig = {
+    minWidth?: number;
+    maxWidth?: number;
+    theme?: DeepPartial<ChartTheme>;
+    components?: ResponsiveComponentOverride[];
+};
+export type ResponsiveBreakpointDefinition = number | ResponsiveBreakpointConfig;
+export type ResponsiveBreakpoints = Record<string, ResponsiveBreakpointDefinition>;
 export type ResponsiveRenderContext = {
     width: number;
     height: number;
+    activeBreakpoints: string[];
     breakpoint: string | null;
 };
 export type ResponsiveComponentSnapshot = {
@@ -179,7 +189,6 @@ export type BarConfigBase = {
     dataKey: string;
     fill?: string;
     colorAdapter?: (data: DataItem, index: number) => string;
-    orientation?: 'vertical' | 'horizontal';
     maxBarSize?: number;
     valueLabel?: BarValueLabelConfig;
 };
@@ -218,6 +227,8 @@ export declare function getSeriesColor(series: {
     fill?: string;
 }): string;
 export type LabelOversizedBehavior = 'truncate' | 'wrap' | 'hide';
+export type AxisTickValue = string | number | Date;
+export type AxisTickFormatter = (value: AxisTickValue) => string;
 export type XAxisConfigBase = {
     display?: boolean;
     dataKey?: string;
@@ -228,7 +239,7 @@ export type XAxisConfigBase = {
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
-    tickFormat?: string | ((value: number) => string) | null;
+    tickFormat?: string | AxisTickFormatter | null;
     autoHideOverlapping?: boolean;
     minLabelGap?: number;
     preserveEndLabels?: boolean;
@@ -238,7 +249,7 @@ export type XAxisConfig = XAxisConfigBase & {
 };
 export type YAxisConfigBase = {
     display?: boolean;
-    tickFormat?: string | ((value: number) => string) | null;
+    tickFormat?: string | AxisTickFormatter | null;
     rotatedLabels?: boolean;
     maxLabelWidth?: number;
     oversizedBehavior?: LabelOversizedBehavior;
@@ -303,8 +314,14 @@ export type TitleConfig = TitleConfigBase & {
     exportHooks?: ExportHooks<TitleConfigBase>;
 };
 export type ScaleType = 'band' | 'linear' | 'time' | 'log';
-export type D3Scale = any;
 export type ScaleDomainValue = string | number | Date;
+export type D3Scale = {
+    (value: ScaleDomainValue): number | undefined;
+    domain(): ScaleDomainValue[];
+    range(): number[];
+    copy(): D3Scale;
+    bandwidth?(): number;
+};
 export type ScaleConfig = {
     type: ScaleType;
     domain?: ScaleDomainValue[];

package/{utils.d.ts → dist/utils.d.ts}

@@ -1,8 +1,6 @@
-import { type ClassValue } from 'clsx';
 import type { DeepPartial } from './types.js';
 export { toChartData } from './grouped-tabular.js';
 export type { GroupedStringParseOptions, ToChartDataOptions, } from './grouped-tabular.js';
-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.

package/{utils.js → dist/utils.js}

@@ -1,9 +1,4 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 export { toChartData } from './grouped-tabular.js';
-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.

package/{word-cloud-chart.d.ts → dist/word-cloud-chart.d.ts}

@@ -12,7 +12,7 @@ export type WordCloudConfig = {
     rotation?: WordCloudRotationMode;
     spiral?: WordCloudSpiral;
 };
-export type WordCloudChartConfig = Pick<BaseChartConfig, 'data' | 'theme' | 'responsive'> & {
+export type WordCloudChartConfig = Pick<BaseChartConfig, 'data' | 'width' | 'height' | 'theme' | 'responsive'> & {
     wordCloud?: WordCloudConfig;
 };
 export declare class WordCloudChart extends BaseChart {

package/{word-cloud-chart.js → dist/word-cloud-chart.js}

@@ -115,6 +115,8 @@ export class WordCloudChart extends BaseChart {
     createExportChart() {
         return new WordCloudChart({
             data: this.sourceData,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
             theme: this.theme,
             responsive: this.responsiveConfig,
             wordCloud: this.options,

package/{x-axis.d.ts → dist/x-axis.d.ts}

@@ -22,10 +22,11 @@ export declare class XAxis implements LayoutAwareComponent<XAxisConfigBase> {
     private readonly minLabelGap;
     private readonly preserveEndLabels;
     readonly exportHooks?: ExportHooks<XAxisConfigBase>;
+    private resolveFontSizeValue;
     private resolveGroupLabelStyle;
     constructor(config?: XAxisConfig);
     getExportConfig(): XAxisConfigBase;
-    createExportComponent(override?: Partial<XAxisConfigBase>): LayoutAwareComponent;
+    createExportComponent(override?: Partial<XAxisConfigBase>): LayoutAwareComponent<XAxisConfigBase>;
     /**
      * Returns the space required by the x-axis
      */

package/{x-axis.js → dist/x-axis.js}

@@ -2,14 +2,23 @@ import { axisBottom } from 'd3';
 import { measureTextWidth, truncateText, wrapText, mergeDeep } from './utils.js';
 import { GROUPED_CATEGORY_ID_KEY, GROUPED_CATEGORY_LABEL_KEY, GROUPED_GAP_TICK_PREFIX, GROUPED_GROUP_LABEL_KEY, } from './grouped-data.js';
 export class XAxis {
+    resolveFontSizeValue(fontSize, fallback) {
+        if (typeof fontSize === 'number' && Number.isFinite(fontSize)) {
+            return fontSize;
+        }
+        if (typeof fontSize === 'string') {
+            const parsedFontSize = parseFloat(fontSize);
+            if (Number.isFinite(parsedFontSize)) {
+                return parsedFontSize;
+            }
+        }
+        return fallback;
+    }
     resolveGroupLabelStyle(theme) {
         const axisGroupLabel = theme.axis.groupLabel;
         const fontFamily = axisGroupLabel?.fontFamily ?? theme.axis.fontFamily;
         const fontWeight = axisGroupLabel?.fontWeight ?? '700';
-        const parsedFontSize = parseFloat(axisGroupLabel?.fontSize ?? theme.axis.fontSize);
-        const fontSize = Number.isFinite(parsedFontSize)
-            ? parsedFontSize
-            : this.fontSize;
+        const fontSize = this.resolveFontSizeValue(axisGroupLabel?.fontSize ?? theme.axis.fontSize, this.fontSize);
         const color = axisGroupLabel?.color ?? '#111827';
         return {
             fontFamily,
@@ -91,7 +100,6 @@ export class XAxis {
             writable: true,
             value: void 0
         });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         Object.defineProperty(this, "tickFormat", {
             enumerable: true,
             configurable: true,
@@ -223,12 +231,7 @@ export class XAxis {
             this.wrapLineCount = 1;
             return;
         }
-        const parsedFontSize = typeof theme.axis.fontSize === 'string'
-            ? parseFloat(theme.axis.fontSize)
-            : theme.axis.fontSize;
-        this.fontSize = Number.isFinite(parsedFontSize)
-            ? parsedFontSize
-            : this.fontSize;
+        this.fontSize = this.resolveFontSizeValue(theme.axis.fontSize, this.fontSize);
         const fontSize = this.fontSize;
         const fontFamily = theme.axis.fontFamily;
         const fontWeight = theme.axis.fontWeight || 'normal';
@@ -308,11 +311,12 @@ export class XAxis {
         }
         else if (this.tickFormat) {
             // Apply tick formatting if specified
-            if (typeof this.tickFormat === 'function') {
-                axisGenerator.tickFormat(this.tickFormat);
+            const tickFormat = this.tickFormat;
+            if (typeof tickFormat === 'function') {
+                axisGenerator.tickFormat((value) => tickFormat(value));
             }
             else {
-                axisGenerator.ticks(5, this.tickFormat);
+                axisGenerator.ticks(5, tickFormat);
             }
         }
         const axis = svg

package/{xy-chart.d.ts → dist/xy-chart.d.ts}

@@ -1,7 +1,8 @@
 import { BaseChart, type BaseChartConfig, type BaseLayoutContext, type BaseRenderContext } from './base-chart.js';
-import type { ChartComponent } from './chart-interface.js';
-import { type AreaStackConfig, type BarStackConfig, type LegendSeries } from './types.js';
+import type { ChartComponentBase } from './chart-interface.js';
+import { type AreaStackConfig, type BarStackConfig, type LegendSeries, type Orientation } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
+    orientation?: Orientation;
     barStack?: BarStackConfig;
     areaStack?: AreaStackConfig;
 };
@@ -11,11 +12,12 @@ export declare class XYChart extends BaseChart {
     private barStackGap;
     private barStackReverseSeries;
     private areaStackMode;
+    private readonly orientation;
     constructor(config: XYChartConfig);
-    addChild(component: ChartComponent): this;
-    protected getExportComponents(): ChartComponent[];
+    addChild(component: ChartComponentBase): this;
+    protected getExportComponents(): ChartComponentBase[];
     protected createExportChart(): BaseChart;
-    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
+    protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected prepareLayout(context: BaseLayoutContext): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     private getXKey;
@@ -28,6 +30,7 @@ export declare class XYChart extends BaseChart {
     private cloneSeriesWithOverride;
     private setupScales;
     private isHorizontalOrientation;
+    private validateSeriesOrientation;
     private collectSeriesValues;
     private getStackedAreaGroups;
     private buildBandDomainWithGroupGaps;