@internetstiftelsen/charts 0.9.2 → 0.10.0

package/dist/chart-interface.d.ts

@@ -1,5 +1,5 @@
 import type { ExportHooks } from './types.js';
-export type ChartComponentType = 'line' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+export type ChartComponentType = 'line' | 'scatter' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
 export interface ChartComponentBase {
     type: ChartComponentType;
 }

package/dist/donut-chart.js

@@ -122,7 +122,7 @@ export class DonutChart extends RadialChartBase {
             ...(this.centerContent ? [this.centerContent] : []),
             ...this.getBaseExportComponents({
                 tooltip: true,
-                legend: this.legend?.isInlineMode(),
+                legend: this.shouldIncludeLegendInExport(),
             }),
         ];
     }

package/dist/gauge-chart.js

@@ -675,7 +675,7 @@ export class GaugeChart extends BaseChart {
         return this.getBaseExportComponents({
             title: true,
             tooltip: true,
-            legend: this.legend?.isInlineMode(),
+            legend: this.shouldIncludeLegendInExport(),
         });
     }
     update(data) {

package/dist/legend-state.d.ts

@@ -0,0 +1,19 @@
+export type LegendVisibilityMap = Record<string, boolean>;
+type LegendStateMutationOptions = {
+    silent?: boolean;
+};
+export declare class LegendStateController {
+    private visibilityState;
+    private readonly changeCallbacks;
+    clone(): LegendStateController;
+    hasSeries(dataKey: string): boolean;
+    isSeriesVisible(dataKey: string): boolean;
+    ensureSeries(dataKeys: Iterable<string>, options?: LegendStateMutationOptions): void;
+    setSeriesVisible(dataKey: string, visible: boolean, options?: LegendStateMutationOptions): void;
+    toggleSeries(dataKey: string, options?: LegendStateMutationOptions): void;
+    setVisibilityMap(visibility: LegendVisibilityMap, options?: LegendStateMutationOptions): void;
+    subscribe(callback: () => void): () => void;
+    toVisibilityMap(): LegendVisibilityMap;
+    private triggerChange;
+}
+export {};

package/dist/legend-state.js

@@ -0,0 +1,81 @@
+export class LegendStateController {
+    constructor() {
+        Object.defineProperty(this, "visibilityState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        Object.defineProperty(this, "changeCallbacks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Set()
+        });
+    }
+    clone() {
+        const controller = new LegendStateController();
+        controller.visibilityState = new Map(this.visibilityState);
+        return controller;
+    }
+    hasSeries(dataKey) {
+        return this.visibilityState.has(dataKey);
+    }
+    isSeriesVisible(dataKey) {
+        return this.visibilityState.get(dataKey) ?? true;
+    }
+    ensureSeries(dataKeys, options) {
+        let changed = false;
+        for (const dataKey of dataKeys) {
+            if (this.visibilityState.has(dataKey)) {
+                continue;
+            }
+            this.visibilityState.set(dataKey, true);
+            changed = true;
+        }
+        if (changed && !options?.silent) {
+            this.triggerChange();
+        }
+    }
+    setSeriesVisible(dataKey, visible, options) {
+        const currentValue = this.visibilityState.get(dataKey);
+        if (currentValue === visible) {
+            return;
+        }
+        this.visibilityState.set(dataKey, visible);
+        if (!options?.silent) {
+            this.triggerChange();
+        }
+    }
+    toggleSeries(dataKey, options) {
+        this.setSeriesVisible(dataKey, !this.isSeriesVisible(dataKey), options);
+    }
+    setVisibilityMap(visibility, options) {
+        let changed = false;
+        Object.entries(visibility).forEach(([dataKey, visible]) => {
+            const currentValue = this.visibilityState.get(dataKey);
+            if (currentValue === visible) {
+                return;
+            }
+            this.visibilityState.set(dataKey, visible);
+            changed = true;
+        });
+        if (changed && !options?.silent) {
+            this.triggerChange();
+        }
+    }
+    subscribe(callback) {
+        this.changeCallbacks.add(callback);
+        return () => {
+            this.changeCallbacks.delete(callback);
+        };
+    }
+    toVisibilityMap() {
+        return Object.fromEntries(this.visibilityState.entries());
+    }
+    triggerChange() {
+        this.changeCallbacks.forEach((callback) => {
+            callback();
+        });
+    }
+}

package/dist/legend.d.ts

@@ -1,6 +1,7 @@
 import { type Selection } from 'd3';
 import type { LegendConfig, ChartTheme, LegendSeries, ExportHooks, LegendConfigBase, LegendMode } from './types.js';
 import type { LayoutAwareComponent, ComponentSpace } from './chart-interface.js';
+import { LegendStateController } from './legend-state.js';
 export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     readonly type: "legend";
     mode: LegendMode;
@@ -13,7 +14,8 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private readonly itemSpacingX?;
     private readonly itemSpacingY?;
     private readonly gapBetweenBoxAndText;
-    private visibilityState;
+    private stateController;
+    private stateControllerCleanup;
     private onToggleCallback?;
     private onChangeCallbacks;
     private estimatedLayout;
@@ -22,6 +24,7 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     getExportConfig(): LegendConfigBase;
     createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent<LegendConfigBase>;
     setToggleCallback(callback: () => void): void;
+    setStateController(controller: LegendStateController): void;
     isInlineMode(): boolean;
     isDisconnectedMode(): boolean;
     isHiddenMode(): boolean;
@@ -50,5 +53,5 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private positionRows;
     private getLayoutSignature;
     private getFallbackRowHeight;
-    private triggerChange;
+    private bindStateController;
 }

package/dist/legend.js

@@ -1,5 +1,6 @@
 import { select } from 'd3';
 import { getSeriesColor } from './types.js';
+import { LegendStateController } from './legend-state.js';
 import { getContrastTextColor, mergeDeep } from './utils.js';
 export class Legend {
     constructor(config) {
@@ -69,11 +70,17 @@ export class Legend {
             writable: true,
             value: 8
         });
-        Object.defineProperty(this, "visibilityState", {
+        Object.defineProperty(this, "stateController", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Map()
+            value: void 0
+        });
+        Object.defineProperty(this, "stateControllerCleanup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
         });
         Object.defineProperty(this, "onToggleCallback", {
             enumerable: true,
@@ -108,6 +115,8 @@ export class Legend {
         this.itemSpacingX = config?.itemSpacingX;
         this.itemSpacingY = config?.itemSpacingY;
         this.exportHooks = config?.exportHooks;
+        this.stateController = new LegendStateController();
+        this.bindStateController(this.stateController);
     }
     getExportConfig() {
         return {
@@ -127,16 +136,19 @@ export class Legend {
             ...merged,
             exportHooks: this.exportHooks,
         });
-        legend.visibilityState = new Map(this.visibilityState);
-        legend.onToggleCallback = () => {
-            this.visibilityState = new Map(legend.visibilityState);
-            this.onToggleCallback?.();
-        };
+        const clonedStateController = this.stateController.clone();
+        clonedStateController.subscribe(() => {
+            this.stateController.setVisibilityMap(clonedStateController.toVisibilityMap());
+        });
+        legend.setStateController(clonedStateController);
         return legend;
     }
     setToggleCallback(callback) {
         this.onToggleCallback = callback;
     }
+    setStateController(controller) {
+        this.bindStateController(controller);
+    }
     isInlineMode() {
         return this.mode === 'inline';
     }
@@ -159,22 +171,16 @@ export class Legend {
         };
     }
     isSeriesVisible(dataKey) {
-        return this.visibilityState.get(dataKey) ?? true;
+        return this.stateController.isSeriesVisible(dataKey);
     }
     setSeriesVisible(dataKey, visible) {
-        this.visibilityState.set(dataKey, visible);
-        this.triggerChange();
+        this.stateController.setSeriesVisible(dataKey, visible);
     }
     toggleSeries(dataKey) {
-        const currentState = this.visibilityState.get(dataKey) ?? true;
-        this.visibilityState.set(dataKey, !currentState);
-        this.triggerChange();
+        this.stateController.toggleSeries(dataKey);
     }
     setVisibilityMap(visibility) {
-        Object.entries(visibility).forEach(([dataKey, isVisible]) => {
-            this.visibilityState.set(dataKey, isVisible);
-        });
-        this.triggerChange();
+        this.stateController.setVisibilityMap(visibility);
     }
     estimateLayoutSpace(series, theme, width, svg) {
         const signature = this.getLayoutSignature(series, width, theme);
@@ -269,7 +275,7 @@ export class Legend {
             .attr('width', theme.legend.boxSize)
             .attr('height', theme.legend.boxSize)
             .attr('fill', (d) => {
-            const isVisible = this.visibilityState.get(d.dataKey) ?? true;
+            const isVisible = this.stateController.isSeriesVisible(d.dataKey);
             return isVisible ? d.color : theme.legend.uncheckedColor;
         })
             .attr('rx', 3);
@@ -283,7 +289,7 @@ export class Legend {
             .attr('stroke-linecap', 'round')
             .attr('stroke-linejoin', 'round')
             .style('display', (d) => {
-            const isVisible = this.visibilityState.get(d.dataKey) ?? true;
+            const isVisible = this.stateController.isSeriesVisible(d.dataKey);
             return isVisible ? 'block' : 'none';
         });
         // Add label text
@@ -296,7 +302,7 @@ export class Legend {
             .text((d) => d.label);
     }
     isLegendItemVisible(dataKey) {
-        return this.visibilityState.get(dataKey) ?? true;
+        return this.stateController.isSeriesVisible(dataKey);
     }
     isToggleActivationKey(key) {
         return key === 'Enter' || key === ' ' || key === 'Spacebar';
@@ -304,11 +310,7 @@ export class Legend {
     computeLayout(series, theme, width, svg) {
         const settings = this.resolveLayoutSettings(theme);
         const legendItems = this.buildLegendItems(series);
-        legendItems.forEach((item) => {
-            if (!this.visibilityState.has(item.dataKey)) {
-                this.visibilityState.set(item.dataKey, true);
-            }
-        });
+        this.stateController.ensureSeries(legendItems.map((item) => item.dataKey), { silent: true });
         const measuredItems = this.measureLegendItemWidths(legendItems, theme, svg);
         const rows = this.buildRows(measuredItems, width, settings);
         const positionedItems = this.positionRows(rows, width, settings);
@@ -439,10 +441,14 @@ export class Legend {
     getFallbackRowHeight(theme) {
         return Math.max(theme.legend.boxSize, theme.legend.fontSize);
     }
-    triggerChange() {
-        this.onToggleCallback?.();
-        this.onChangeCallbacks.forEach((callback) => {
-            callback();
+    bindStateController(controller) {
+        this.stateControllerCleanup?.();
+        this.stateController = controller;
+        this.stateControllerCleanup = controller.subscribe(() => {
+            this.onToggleCallback?.();
+            this.onChangeCallbacks.forEach((callback) => {
+                callback();
+            });
         });
     }
 }

package/dist/pie-chart.js

@@ -173,7 +173,7 @@ export class PieChart extends RadialChartBase {
         return this.getBaseExportComponents({
             title: true,
             tooltip: true,
-            legend: this.legend?.isInlineMode(),
+            legend: this.shouldIncludeLegendInExport(),
         });
     }
     update(data) {

package/dist/scatter.d.ts

@@ -0,0 +1,16 @@
+import type { ChartTheme, D3Scale, DataItem, ExportHooks, LineValueLabelConfig, ScaleType, ScatterConfig, ScatterConfigBase } from './types.js';
+import type { ChartComponent } from './chart-interface.js';
+import type { Selection } from 'd3';
+export declare class Scatter implements ChartComponent<ScatterConfigBase> {
+    readonly type: "scatter";
+    readonly dataKey: string;
+    readonly stroke: string;
+    readonly pointSize?: number;
+    readonly valueLabel?: LineValueLabelConfig;
+    readonly exportHooks?: ExportHooks<ScatterConfigBase>;
+    constructor(config: ScatterConfig);
+    getExportConfig(): ScatterConfigBase;
+    createExportComponent(override?: Partial<ScatterConfigBase>): ChartComponent<ScatterConfigBase>;
+    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/dist/scatter.js

@@ -0,0 +1,163 @@
+import { mergeDeep, sanitizeForCSS } from './utils.js';
+import { getScalePosition } from './scale-utils.js';
+export class Scatter {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'scatter'
+        });
+        Object.defineProperty(this, "dataKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stroke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pointSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.dataKey = config.dataKey;
+        this.stroke = config.stroke || '#8884d8';
+        this.pointSize = config.pointSize;
+        this.valueLabel = config.valueLabel;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            dataKey: this.dataKey,
+            stroke: this.stroke,
+            pointSize: this.pointSize,
+            valueLabel: this.valueLabel,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Scatter({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
+    }
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme) {
+        const getXPosition = (d) => {
+            return (getScalePosition(x, d[xKey], xScaleType) +
+                (x.bandwidth ? x.bandwidth() / 2 : 0));
+        };
+        const hasValidValue = (d) => {
+            const value = d[this.dataKey];
+            if (value === null || value === undefined) {
+                return false;
+            }
+            return Number.isFinite(parseValue(value));
+        };
+        const validData = data.filter(hasValidValue);
+        const pointSize = this.pointSize ?? theme.line.point.size;
+        const pointStrokeWidth = theme.line.point.strokeWidth;
+        const pointStrokeColor = theme.line.point.strokeColor || this.stroke;
+        const pointColor = theme.line.point.color || this.stroke;
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
+        plotGroup
+            .selectAll(`.scatter-point-${sanitizedKey}`)
+            .data(validData)
+            .join('circle')
+            .attr('class', `scatter-point-${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);
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(plotGroup, validData, y, parseValue, theme, getXPosition, pointSize);
+        }
+    }
+    renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition, pointSize) {
+        const config = this.valueLabel;
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background;
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `scatter-value-labels-${sanitizeForCSS(this.dataKey)}`);
+        const plotTop = y.range()[1];
+        const plotBottom = y.range()[0];
+        data.forEach((d) => {
+            const value = parseValue(d[this.dataKey]);
+            const valueText = String(value);
+            const xPos = getXPosition(d);
+            const yPos = y(value) || 0;
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            const labelX = xPos;
+            let labelY;
+            let shouldRender = true;
+            labelY = yPos - boxHeight / 2 - pointSize - 4;
+            if (labelY - boxHeight / 2 < plotTop + 4) {
+                labelY = yPos + boxHeight / 2 + pointSize + 4;
+                if (labelY + boxHeight / 2 > plotBottom - 4) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (shouldRender) {
+                const group = labelGroup.append('g');
+                group
+                    .append('rect')
+                    .attr('x', labelX - boxWidth / 2)
+                    .attr('y', labelY - boxHeight / 2)
+                    .attr('width', boxWidth)
+                    .attr('height', boxHeight)
+                    .attr('rx', borderRadius)
+                    .attr('ry', borderRadius)
+                    .attr('fill', background)
+                    .attr('stroke', border)
+                    .attr('stroke-width', 1);
+                group
+                    .append('text')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'central')
+                    .style('font-size', `${fontSize}px`)
+                    .style('font-family', fontFamily)
+                    .style('font-weight', fontWeight)
+                    .style('fill', color)
+                    .style('pointer-events', 'none')
+                    .text(valueText);
+            }
+        });
+    }
+}

package/dist/tooltip.d.ts

@@ -4,6 +4,7 @@ import type { ChartComponent } from './chart-interface.js';
 import type { Line } from './line.js';
 import type { Bar } from './bar.js';
 import type { Area } from './area.js';
+import type { Scatter } from './scatter.js';
 import type { PlotAreaBounds } from './layout-manager.js';
 export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     readonly id = "iisChartTooltip";
@@ -21,6 +22,6 @@ export declare class Tooltip implements ChartComponent<TooltipConfigBase> {
     getExportConfig(): TooltipConfigBase;
     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;
+    attachToArea(svg: Selection<SVGSVGElement, undefined, null, undefined>, data: DataItem[], series: (Line | Bar | Area | Scatter)[], xKey: string, x: D3Scale, y: D3Scale, theme: ChartTheme, plotArea: PlotAreaBounds, parseValue: (value: unknown) => number, isHorizontal?: boolean, categoryScaleType?: ScaleType, resolveSeriesValue?: (series: Line | Bar | Area | Scatter, dataPoint: DataItem, index: number) => number): void;
     cleanup(): void;
 }

package/dist/tooltip.js

@@ -214,10 +214,10 @@ export class Tooltip {
             .attr('aria-hidden', 'true')
             .style('fill', 'none')
             .style('pointer-events', 'all');
-        const lineSeries = series.filter((s) => s.type === 'line' || s.type === 'area');
+        const pointSeries = series.filter((s) => s.type === 'line' || s.type === 'area' || s.type === 'scatter');
         const barSeries = series.filter((s) => s.type === 'bar');
         const hasBarSeries = barSeries.length > 0;
-        const focusCircles = lineSeries.map((s) => {
+        const focusCircles = pointSeries.map((s) => {
             const seriesColor = getSeriesColor(s);
             return svg
                 .append('circle')
@@ -243,7 +243,7 @@ export class Tooltip {
         const showTooltipAtIndex = (closestIndex) => {
             const dataPoint = data[closestIndex];
             const dataPointPosition = dataPointPositions[closestIndex];
-            lineSeries.forEach((s, i) => {
+            pointSeries.forEach((s, i) => {
                 const value = resolveSeriesValue(s, dataPoint, closestIndex);
                 if (!Number.isFinite(value)) {
                     focusCircles[i].style('opacity', 0);

package/dist/types.d.ts

@@ -176,6 +176,7 @@ export type BarValueLabelConfig = ValueLabelConfig & {
     position?: 'inside' | 'outside';
     insidePosition?: 'top' | 'middle' | 'bottom';
 };
+export type BarSide = 'left' | 'right';
 export type LineConfigBase = {
     dataKey: string;
     stroke?: string;
@@ -185,11 +186,21 @@ export type LineConfigBase = {
 export type LineConfig = LineConfigBase & {
     exportHooks?: ExportHooks<LineConfigBase>;
 };
+export type ScatterConfigBase = {
+    dataKey: string;
+    stroke?: string;
+    pointSize?: number;
+    valueLabel?: LineValueLabelConfig;
+};
+export type ScatterConfig = ScatterConfigBase & {
+    exportHooks?: ExportHooks<ScatterConfigBase>;
+};
 export type BarConfigBase = {
     dataKey: string;
     fill?: string;
     colorAdapter?: (data: DataItem, index: number) => string;
     maxBarSize?: number;
+    side?: BarSide;
     valueLabel?: BarValueLabelConfig;
 };
 export type BarConfig = BarConfigBase & {
@@ -328,6 +339,7 @@ export type ScaleConfig = {
     range?: number[];
     padding?: number;
     groupGap?: number;
+    reverse?: boolean;
     nice?: boolean;
     min?: number;
     max?: number;
@@ -344,6 +356,10 @@ export type BarStackingContext = {
     totalSeries: number;
     cumulativeData: Map<string, number>;
     totalData: Map<string, number>;
+    positiveCumulativeData: Map<string, number>;
+    negativeCumulativeData: Map<string, number>;
+    positiveTotalData: Map<string, number>;
+    negativeTotalData: Map<string, number>;
     gap: number;
     nextLayerData?: Map<string, number>;
 };

package/dist/validation.d.ts

@@ -26,6 +26,10 @@ export declare class ChartValidator {
      * Validates scale configuration
      */
     static validateScaleConfig(scaleType: string, domain: ScaleDomainValue[] | undefined): void;
+    /**
+     * Validates that explicit numeric bar domains include zero so bars retain a truthful baseline
+     */
+    static validateBarDomainIncludesZero(domain: ScaleDomainValue[] | undefined): void;
     /**
      * Warns about potential issues without throwing errors
      */

package/dist/validation.js

@@ -91,6 +91,25 @@ export class ChartValidator {
             }
         }
     }
+    /**
+     * Validates that explicit numeric bar domains include zero so bars retain a truthful baseline
+     */
+    static validateBarDomainIncludesZero(domain) {
+        if (!domain || domain.length < 2) {
+            return;
+        }
+        const numericDomain = domain.filter((value) => {
+            return typeof value === 'number' && Number.isFinite(value);
+        });
+        if (numericDomain.length < 2) {
+            return;
+        }
+        const minValue = Math.min(...numericDomain);
+        const maxValue = Math.max(...numericDomain);
+        if (minValue > 0 || maxValue < 0) {
+            throw new ChartValidationError('Bar charts require explicit numeric domains to include 0 so bars can render from a zero baseline');
+        }
+    }
     /**
      * Warns about potential issues without throwing errors
      */

package/dist/xy-chart.d.ts

@@ -1,6 +1,6 @@
 import { BaseChart, type BaseChartConfig, type BaseLayoutContext, type BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
-import { type AreaStackConfig, type BarStackConfig, type LegendSeries, type Orientation } from './types.js';
+import { type AreaStackConfig, type AxisScaleConfig, type BarStackConfig, type LegendSeries, type Orientation, type ScaleType } from './types.js';
 export type XYChartConfig = BaseChartConfig & {
     orientation?: Orientation;
     barStack?: BarStackConfig;
@@ -13,6 +13,7 @@ export declare class XYChart extends BaseChart {
     private barStackReverseSeries;
     private areaStackMode;
     private readonly orientation;
+    private scaleConfigOverride;
     constructor(config: XYChartConfig);
     addChild(component: ChartComponentBase): this;
     protected getExportComponents(): ChartComponentBase[];
@@ -23,18 +24,32 @@ export declare class XYChart extends BaseChart {
     private getXKey;
     protected getLegendSeries(): LegendSeries[];
     private getCategoryScaleType;
+    getOrientation(): Orientation;
+    getValueAxisScaleType(): ScaleType | null;
+    getValueAxisDomain(): [number, number] | null;
+    getBaseValueAxisDomain(): [number, number] | null;
+    setScaleConfigOverride(override: AxisScaleConfig | null, rerender?: boolean): this;
+    private resolveValueAxisDomain;
     private getVisibleSeries;
     private getDisplaySeries;
     private resolveSeriesDefaults;
     private shouldReplaceSeriesColor;
     private cloneSeriesWithOverride;
     private setupScales;
+    private get resolvedScaleConfig();
+    private getResolvedAxisConfigs;
+    private getAxisConfigsForScaleConfig;
     private isHorizontalOrientation;
+    private getSeriesTypeName;
     private validateSeriesOrientation;
     private collectSeriesValues;
+    private getBarPercentDomain;
+    private getBarValueDomain;
     private getStackedAreaGroups;
     private buildBandDomainWithGroupGaps;
+    private getScaleRange;
     private createScale;
+    private resolveScaleDomain;
     private getSeriesTooltipValue;
     private renderSeries;
     private computeStackingData;