@internetstiftelsen/charts 0.9.0 → 0.9.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Internetstiftelsen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -7,9 +7,11 @@ A framework-agnostic, composable charting library built on D3.js with TypeScript
 - **Framework Agnostic** - Works with vanilla JS, React, Vue, Svelte, or any framework
 - **Composable Architecture** - Build charts by composing components
 - **Multiple Chart Types** - XYChart (lines, areas, bars), WordCloudChart, DonutChart, PieChart, and GaugeChart
+- **Radial Value Labels** - Pie and donut charts support optional on-chart labels with custom formatters
 - **Optional Gauge Animation** - Animate gauge value transitions with `gauge.animate`
 - **Stacking Control** - Bar stacking modes with optional reversed visual series order
 - **Flexible Scales** - Band, linear, time, and logarithmic scales
+- **Explicit or Responsive Sizing** - Set top-level `width`/`height` or let the container drive size
 - **Auto Resize** - Built-in ResizeObserver handles responsive behavior
 - **Responsive Policy** - Chart-level container-query overrides for theme and components
 - **Type Safe** - Written in TypeScript with full type definitions
@@ -82,6 +84,48 @@ chart
 chart.render('#chart-container');
 ```
 
+Use top-level `width` and `height` for fixed-size charts, or omit them to size
+from the render container.
+
+Theme overrides are deep-partial, so nested overrides like
+`theme.axis.fontSize` preserve the rest of the theme defaults.
+
+Responsive overrides are declarative and merge all matching breakpoints in
+declaration order:
+
+```typescript
+const chart = new XYChart({
+    data,
+    responsive: {
+        breakpoints: {
+            sm: {
+                maxWidth: 640,
+                theme: {
+                    axis: {
+                        fontSize: 11,
+                    },
+                },
+                components: [
+                    {
+                        match: { type: 'xAxis' },
+                        override: { display: false },
+                    },
+                ],
+            },
+            md: {
+                minWidth: 641,
+                maxWidth: 768,
+                theme: {
+                    axis: {
+                        fontSize: 12,
+                    },
+                },
+            },
+        },
+    },
+});
+```
+
 ## Word Cloud
 
 ```javascript

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

@@ -18,7 +18,7 @@ export declare class Area implements ChartComponent<AreaConfigBase> {
     readonly exportHooks?: ExportHooks<AreaConfigBase>;
     constructor(config: AreaConfig);
     getExportConfig(): AreaConfigBase;
-    createExportComponent(override?: Partial<AreaConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<AreaConfigBase>): ChartComponent<AreaConfigBase>;
     private getStackValues;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, data: DataItem[], xKey: string, x: D3Scale, y: D3Scale, parseValue: (value: unknown) => number, xScaleType: ScaleType | undefined, theme: ChartTheme, stackingContext?: AreaStackingContext, valueLabelLayer?: Selection<SVGGElement, undefined, null, undefined>): void;
     private renderValueLabels;

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

@@ -1,19 +1,18 @@
 import type { Selection } from 'd3';
-import type { BarConfig, BarStackingContext, BarValueLabelConfig, ChartTheme, D3Scale, DataItem, Orientation, ScaleType, ExportHooks, BarConfigBase } from './types.js';
+import type { BarConfig, BarStackingContext, BarValueLabelConfig, ChartTheme, D3Scale, DataItem, ScaleType, ExportHooks, BarConfigBase } from './types.js';
 import type { ChartComponent } from './chart-interface.js';
 export declare class Bar implements ChartComponent<BarConfigBase> {
     readonly type: "bar";
     readonly dataKey: string;
     readonly fill: string;
     readonly colorAdapter?: (data: DataItem, index: number) => string;
-    readonly orientation: Orientation;
     readonly maxBarSize?: number;
     readonly valueLabel?: BarValueLabelConfig;
     readonly exportHooks?: ExportHooks<BarConfigBase>;
     constructor(config: BarConfig);
     getExportConfig(): BarConfigBase;
-    createExportComponent(override?: Partial<BarConfigBase>): ChartComponent;
-    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;
+    createExportComponent(override?: Partial<BarConfigBase>): ChartComponent<BarConfigBase>;
+    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, orientation?: 'vertical' | 'horizontal'): void;
     private renderVertical;
     private renderHorizontal;
     private renderVerticalValueLabels;

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

@@ -40,12 +40,6 @@ export class Bar {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "orientation", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "maxBarSize", {
             enumerable: true,
             configurable: true,
@@ -67,7 +61,6 @@ export class Bar {
         this.dataKey = config.dataKey;
         this.fill = config.fill || '#8884d8';
         this.colorAdapter = config.colorAdapter;
-        this.orientation = config.orientation || 'vertical';
         this.maxBarSize = config.maxBarSize;
         this.valueLabel = config.valueLabel;
         this.exportHooks = config.exportHooks;
@@ -77,7 +70,6 @@ export class Bar {
             dataKey: this.dataKey,
             fill: this.fill,
             colorAdapter: this.colorAdapter,
-            orientation: this.orientation,
             maxBarSize: this.maxBarSize,
             valueLabel: this.valueLabel,
         };
@@ -89,8 +81,8 @@ export class Bar {
             exportHooks: this.exportHooks,
         });
     }
-    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext) {
-        if (this.orientation === 'vertical') {
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext, orientation = 'vertical') {
+        if (orientation === 'vertical') {
             this.renderVertical(plotGroup, data, xKey, x, y, parseValue, xScaleType, stackingContext);
         }
         else {
@@ -98,7 +90,7 @@ export class Bar {
         }
         // Render value labels if enabled
         if (this.valueLabel?.show && theme) {
-            if (this.orientation === 'vertical') {
+            if (orientation === 'vertical') {
                 this.renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext);
             }
             else {

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

@@ -1,6 +1,6 @@
 import { type Selection } from 'd3';
-import type { ChartData, DataItem, ChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext, LegendItem, LegendSeries, ResponsiveConfig, ResponsiveRenderContext, DeepPartial } from './types.js';
-import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
+import type { ChartData, DataItem, ChartTheme, ResolvedChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext, LegendItem, LegendSeries, ResponsiveConfig, ResponsiveRenderContext, DeepPartial } from './types.js';
+import type { ChartComponentBase, LayoutAwareComponentBase } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
 import type { Grid } from './grid.js';
@@ -12,11 +12,12 @@ type VisualExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
 type RenderDimensions = {
     width: number;
     height: number;
+    svgWidthAttr: number | string;
     svgHeightAttr: number | string;
 };
 type ResponsiveOverrides = {
     theme?: DeepPartial<ChartTheme>;
-    components: Map<ChartComponent, Record<string, unknown>>;
+    components: Map<ChartComponentBase, Record<string, unknown>>;
 };
 type BaseLayoutComponentsOptions = {
     title?: boolean;
@@ -40,7 +41,7 @@ export type BaseRenderContext = BaseLayoutContext & {
     plotGroup: Selection<SVGGElement, undefined, null, undefined>;
     plotArea: PlotAreaBounds;
 };
-type ComponentSlot<TComponent extends ChartComponent = ChartComponent> = {
+type ComponentSlot<TComponent extends ChartComponentBase = ChartComponentBase> = {
     type: TComponent['type'];
     get: () => TComponent | null;
     set: (component: TComponent | null) => void;
@@ -48,7 +49,9 @@ type ComponentSlot<TComponent extends ChartComponent = ChartComponent> = {
 };
 export type BaseChartConfig = {
     data: ChartData;
-    theme?: Partial<ChartTheme>;
+    width?: number;
+    height?: number;
+    theme?: DeepPartial<ChartTheme>;
     scales?: AxisScaleConfig;
     responsive?: ResponsiveConfig;
 };
@@ -58,6 +61,8 @@ export type BaseChartConfig = {
 export declare abstract class BaseChart {
     protected data: DataItem[];
     protected sourceData: ChartData;
+    protected readonly configuredWidth?: number;
+    protected readonly configuredHeight?: number;
     protected readonly theme: ChartTheme;
     protected readonly scaleConfig: AxisScaleConfig;
     protected readonly responsiveConfig?: ResponsiveConfig;
@@ -80,11 +85,12 @@ export declare abstract class BaseChart {
     private readyPromise;
     private disconnectedLegendContainer;
     private renderThemeOverride;
+    private renderSizeOverride;
     protected constructor(config: BaseChartConfig);
     /**
      * Adds a component (axis, grid, tooltip, etc.) to the chart
      */
-    addChild(component: ChartComponent): this;
+    addChild(component: ChartComponentBase): this;
     /**
      * Renders the chart to the specified target element
      */
@@ -95,30 +101,36 @@ export declare abstract class BaseChart {
      */
     private performRender;
     protected resolveRenderDimensions(containerRect: DOMRect): RenderDimensions;
+    private resolveAccessibleLabel;
+    private syncAccessibleLabelFromSvg;
     protected resolveResponsiveContext(context: {
         width: number;
         height: number;
     }): ResponsiveRenderContext;
-    private resolveBreakpointName;
+    private resolveActiveBreakpoints;
     private resolveRenderTheme;
     private applyRenderTheme;
     protected get renderTheme(): ChartTheme;
+    protected get resolvedRenderTheme(): ResolvedChartTheme;
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
      */
-    protected getLayoutComponents(): LayoutAwareComponent[];
-    protected getBaseLayoutComponents(options: BaseLayoutComponentsOptions): LayoutAwareComponent[];
-    protected getExportComponents(): ChartComponent[];
-    protected getOverrideableComponents(): ChartComponent[];
-    protected getBaseExportComponents(options: BaseExportComponentsOptions): ChartComponent[];
-    protected registerBaseComponent(component: ChartComponent): boolean;
-    protected collectExportOverrides(context: ExportRenderContext): Map<ChartComponent, Record<string, unknown>>;
+    protected getLayoutComponents(): LayoutAwareComponentBase[];
+    protected getBaseLayoutComponents(options: BaseLayoutComponentsOptions): LayoutAwareComponentBase[];
+    protected getExportComponents(): ChartComponentBase[];
+    protected getOverrideableComponents(): ChartComponentBase[];
+    protected getBaseExportComponents(options: BaseExportComponentsOptions): ChartComponentBase[];
+    protected registerBaseComponent(component: ChartComponentBase): boolean;
+    protected collectExportOverrides(context: ExportRenderContext): Map<ChartComponentBase, Record<string, unknown>>;
     protected collectResponsiveOverrides(context: ResponsiveRenderContext): ResponsiveOverrides;
+    private collectResponsiveBreakpointOverrides;
+    private createResponsiveComponentSnapshots;
+    private applyResponsiveComponentOverrideEntries;
     protected runExportHooks(context: ExportHookContext): void;
     private mergeComponentOverrideMaps;
     private createOverrideComponents;
-    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
+    protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     private renderExportChart;
     protected renderTitle(svg: Selection<SVGSVGElement, undefined, null, undefined>): void;
     protected renderInlineLegend(svg: Selection<SVGSVGElement, undefined, null, undefined>): void;
@@ -159,9 +171,9 @@ export declare abstract class BaseChart {
     private cleanupDisconnectedLegendContainer;
     protected parseValue(value: unknown): number;
     protected rerender(): void;
-    protected tryRegisterComponent(component: ChartComponent, slots: readonly ComponentSlot[]): boolean;
-    protected applySlotOverrides(overrides: Map<ChartComponent, ChartComponent>, slots: readonly ComponentSlot[]): () => void;
-    protected applyArrayComponentOverrides<TComponent extends ChartComponent>(components: TComponent[], overrides: Map<ChartComponent, ChartComponent>, isComponent: (component: ChartComponent) => component is TComponent): () => void;
+    protected tryRegisterComponent(component: ChartComponentBase, slots: readonly ComponentSlot[]): boolean;
+    protected applySlotOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>, slots: readonly ComponentSlot[]): () => void;
+    protected applyArrayComponentOverrides<TComponent extends ChartComponentBase>(components: TComponent[], overrides: Map<ChartComponentBase, ChartComponentBase>, isComponent: (component: ChartComponentBase) => component is TComponent): () => void;
     private getBaseComponentSlots;
     /**
      * Exports the chart in the specified format

package/{base-chart.js → dist/base-chart.js}

@@ -1,5 +1,5 @@
 import { create } from 'd3';
-import { defaultTheme } from './theme.js';
+import { defaultTheme, DEFAULT_CHART_HEIGHT, DEFAULT_CHART_WIDTH, } from './theme.js';
 import { ChartValidator } from './validation.js';
 import { LayoutManager } from './layout-manager.js';
 import { serializeCSV } from './export-tabular.js';
@@ -8,6 +8,37 @@ import { exportXLSXBlob } from './export-xlsx.js';
 import { exportPDFBlob } from './export-pdf.js';
 import { normalizeChartData } from './grouped-data.js';
 import { mergeDeep } from './utils.js';
+function normalizeChartDimension(value, name) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (!Number.isFinite(value) || value <= 0) {
+        throw new Error(`Chart ${name} must be a positive finite number`);
+    }
+    return value;
+}
+function normalizeResponsiveBreakpoint(definition) {
+    if (typeof definition === 'number') {
+        return Number.isFinite(definition) ? { minWidth: definition } : null;
+    }
+    if (!definition || typeof definition !== 'object') {
+        return null;
+    }
+    const minWidth = Number.isFinite(definition.minWidth)
+        ? definition.minWidth
+        : undefined;
+    const maxWidth = Number.isFinite(definition.maxWidth)
+        ? definition.maxWidth
+        : undefined;
+    if (minWidth === undefined && maxWidth === undefined) {
+        return null;
+    }
+    return {
+        ...definition,
+        minWidth,
+        maxWidth,
+    };
+}
 /**
  * Base chart class that provides common functionality for all chart types
  */
@@ -25,6 +56,18 @@ export class BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "configuredWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "configuredHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "theme", {
             enumerable: true,
             configurable: true,
@@ -157,16 +200,24 @@ export class BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "renderSizeOverride", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         const normalized = normalizeChartData(config.data);
         ChartValidator.validateData(normalized.data);
         this.sourceData = config.data;
         this.data = normalized.data;
-        this.theme = { ...defaultTheme, ...config.theme };
-        this.width = this.theme.width;
-        this.height = this.theme.height;
+        this.configuredWidth = normalizeChartDimension(config.width, 'width');
+        this.configuredHeight = normalizeChartDimension(config.height, 'height');
+        this.theme = mergeDeep(defaultTheme, config.theme);
+        this.width = this.configuredWidth ?? DEFAULT_CHART_WIDTH;
+        this.height = this.configuredHeight ?? DEFAULT_CHART_HEIGHT;
         this.scaleConfig = config.scales || {};
         this.responsiveConfig = config.responsive;
-        this.layoutManager = new LayoutManager(this.theme);
+        this.layoutManager = new LayoutManager(this.resolvedRenderTheme);
     }
     /**
      * Adds a component (axis, grid, tooltip, etc.) to the chart
@@ -228,8 +279,10 @@ export class BaseChart {
             // Clear and setup SVG
             this.container.innerHTML = '';
             this.svg = create('svg')
-                .attr('width', '100%')
+                .attr('width', dimensions.svgWidthAttr)
                 .attr('height', dimensions.svgHeightAttr)
+                .attr('role', 'img')
+                .attr('aria-label', this.resolveAccessibleLabel())
                 .style('display', 'block');
             this.container.appendChild(this.svg.node());
             const svgNode = this.svg.node();
@@ -241,12 +294,7 @@ export class BaseChart {
                 svgNode,
             });
             // Calculate layout
-            const layoutTheme = {
-                ...this.renderTheme,
-                width: this.width,
-                height: this.height,
-            };
-            this.layoutManager = new LayoutManager(layoutTheme);
+            this.layoutManager = new LayoutManager(this.resolvedRenderTheme);
             const components = this.getLayoutComponents();
             const plotArea = this.layoutManager.calculateLayout(components);
             this.plotArea = plotArea;
@@ -268,35 +316,65 @@ export class BaseChart {
         }
     }
     resolveRenderDimensions(containerRect) {
-        const width = containerRect.width || this.theme.width;
-        const height = containerRect.height || this.theme.height;
+        const width = this.renderSizeOverride?.width ??
+            this.configuredWidth ??
+            (containerRect.width || DEFAULT_CHART_WIDTH);
+        const height = this.renderSizeOverride?.height ??
+            this.configuredHeight ??
+            (containerRect.height || DEFAULT_CHART_HEIGHT);
         return {
             width,
             height,
-            svgHeightAttr: '100%',
+            svgWidthAttr: this.renderSizeOverride?.width ??
+                this.configuredWidth ??
+                '100%',
+            svgHeightAttr: this.renderSizeOverride?.height ??
+                this.configuredHeight ??
+                '100%',
         };
     }
+    resolveAccessibleLabel() {
+        const titleText = this.title?.text.trim();
+        if (titleText) {
+            return titleText;
+        }
+        return 'Chart';
+    }
+    syncAccessibleLabelFromSvg(svg) {
+        const titleText = svg.querySelector('.title text')?.textContent?.trim();
+        if (titleText) {
+            svg.setAttribute('aria-label', titleText);
+            return;
+        }
+        svg.setAttribute('aria-label', this.resolveAccessibleLabel());
+    }
     resolveResponsiveContext(context) {
+        const activeBreakpoints = this.resolveActiveBreakpoints(context.width).map(({ name }) => name);
         return {
             ...context,
-            breakpoint: this.resolveBreakpointName(context.width),
+            activeBreakpoints,
+            breakpoint: activeBreakpoints.length > 0
+                ? activeBreakpoints[activeBreakpoints.length - 1]
+                : null,
         };
     }
-    resolveBreakpointName(width) {
+    resolveActiveBreakpoints(width) {
         const breakpoints = this.responsiveConfig?.breakpoints;
         if (!breakpoints) {
-            return null;
+            return [];
         }
-        const sorted = Object.entries(breakpoints)
-            .filter(([, minWidth]) => Number.isFinite(minWidth))
-            .sort((a, b) => a[1] - b[1]);
-        let active = null;
-        sorted.forEach(([name, minWidth]) => {
-            if (width >= minWidth) {
-                active = name;
+        return Object.entries(breakpoints).flatMap(([name, definition]) => {
+            const config = normalizeResponsiveBreakpoint(definition);
+            if (!config) {
+                return [];
             }
+            const matchesMinWidth = config.minWidth === undefined || width >= config.minWidth;
+            const matchesMaxWidth = config.maxWidth === undefined || width <= config.maxWidth;
+            if (!matchesMinWidth || !matchesMaxWidth) {
+                return [];
+            }
+            return [{ name, config }];
         });
-        return active;
     }
     resolveRenderTheme(responsiveOverrides) {
         if (!responsiveOverrides.theme) {
@@ -316,6 +394,13 @@ export class BaseChart {
     get renderTheme() {
         return this.renderThemeOverride ?? this.theme;
     }
+    get resolvedRenderTheme() {
+        return {
+            ...this.renderTheme,
+            width: this.width,
+            height: this.height,
+        };
+    }
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
@@ -388,7 +473,7 @@ export class BaseChart {
         components.forEach((component) => {
             const exportable = component;
             const currentConfig = exportable.getExportConfig?.() ?? {};
-            const result = component.exportHooks?.beforeRender?.call(component, context, currentConfig);
+            const result = exportable.exportHooks?.beforeRender?.call(component, context, currentConfig);
             if (result &&
                 typeof result === 'object' &&
                 exportable.createExportComponent) {
@@ -400,33 +485,65 @@ export class BaseChart {
     collectResponsiveOverrides(context) {
         const beforeRender = this.responsiveConfig?.beforeRender;
         const components = this.getOverrideableComponents();
-        const componentOverrides = new Map();
+        const breakpointOverrides = this.collectResponsiveBreakpointOverrides(context, components);
         if (!beforeRender) {
-            return {
-                components: componentOverrides,
-            };
+            return breakpointOverrides;
         }
-        const snapshots = components.map((component, index) => {
+        const effectiveTheme = breakpointOverrides.theme
+            ? mergeDeep(this.theme, breakpointOverrides.theme)
+            : this.theme;
+        const snapshots = this.createResponsiveComponentSnapshots(components, breakpointOverrides.components);
+        const result = beforeRender(context, {
+            theme: effectiveTheme,
+            components: snapshots,
+        });
+        if (!result || typeof result !== 'object') {
+            return breakpointOverrides;
+        }
+        const componentOverrides = this.mergeComponentOverrideMaps(breakpointOverrides.components);
+        this.applyResponsiveComponentOverrideEntries(result.components, components, componentOverrides);
+        return {
+            theme: breakpointOverrides.theme
+                ? mergeDeep(breakpointOverrides.theme, result.theme)
+                : result.theme,
+            components: componentOverrides,
+        };
+    }
+    collectResponsiveBreakpointOverrides(context, components) {
+        const matchedBreakpoints = this.resolveActiveBreakpoints(context.width);
+        const componentOverrides = new Map();
+        let themeOverride;
+        matchedBreakpoints.forEach(({ config }) => {
+            if (config.theme) {
+                themeOverride = themeOverride
+                    ? mergeDeep(themeOverride, config.theme)
+                    : config.theme;
+            }
+            this.applyResponsiveComponentOverrideEntries(config.components, components, componentOverrides);
+        });
+        return {
+            theme: themeOverride,
+            components: componentOverrides,
+        };
+    }
+    createResponsiveComponentSnapshots(components, overrides) {
+        return components.map((component, index) => {
             const exportable = component;
             const currentConfig = exportable.getExportConfig?.() ?? {};
             const dataKey = component.dataKey;
+            const override = overrides.get(component);
             return {
                 index,
                 type: component.type,
                 dataKey: typeof dataKey === 'string' ? dataKey : undefined,
-                currentConfig,
+                currentConfig: override
+                    ? mergeDeep(currentConfig, override)
+                    : currentConfig,
             };
         });
-        const result = beforeRender(context, {
-            theme: this.theme,
-            components: snapshots,
-        });
-        if (!result || typeof result !== 'object') {
-            return {
-                components: componentOverrides,
-            };
-        }
-        result.components?.forEach((entry) => {
+    }
+    applyResponsiveComponentOverrideEntries(entries, components, overrides) {
+        entries?.forEach((entry) => {
             const match = entry.match ?? {};
             const override = entry.override;
             if (!override || typeof override !== 'object') {
@@ -441,19 +558,16 @@ export class BaseChart {
                 if (!matchesIndex || !matchesType || !matchesDataKey) {
                     return;
                 }
-                const existing = componentOverrides.get(component);
-                componentOverrides.set(component, existing ? mergeDeep(existing, override) : { ...override });
+                const existing = overrides.get(component);
+                overrides.set(component, existing ? mergeDeep(existing, override) : { ...override });
             });
         });
-        return {
-            theme: result.theme,
-            components: componentOverrides,
-        };
     }
     runExportHooks(context) {
         const components = this.getExportComponents();
         components.forEach((component) => {
-            component.exportHooks?.before?.call(component, context);
+            const exportable = component;
+            exportable.exportHooks?.before?.call(component, context);
         });
     }
     mergeComponentOverrideMaps(...maps) {
@@ -964,9 +1078,14 @@ export class BaseChart {
                 ...baseContext,
                 svg: clone,
             });
+            this.syncAccessibleLabelFromSvg(clone);
             return clone.outerHTML;
         }
         const exportChart = this.createExportChart();
+        exportChart.renderSizeOverride = {
+            width: exportWidth,
+            height: exportHeight,
+        };
         const components = this.getExportComponents();
         components.forEach((component) => {
             const exportable = component;
@@ -986,6 +1105,7 @@ export class BaseChart {
             ...baseContext,
             svg: exportSvg,
         });
+        this.syncAccessibleLabelFromSvg(exportSvg);
         return exportSvg.outerHTML;
     }
     exportJSON() {

package/dist/chart-interface.d.ts

@@ -0,0 +1,19 @@
+import type { ExportHooks } from './types.js';
+export type ChartComponentType = 'line' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+export interface ChartComponentBase {
+    type: ChartComponentType;
+}
+export interface ChartComponent<TConfig = unknown> extends ChartComponentBase {
+    type: ChartComponentType;
+    exportHooks?: ExportHooks<TConfig>;
+}
+export type ComponentSpace = {
+    width: number;
+    height: number;
+    position: 'top' | 'bottom' | 'left' | 'right';
+};
+export interface LayoutAwareComponentBase extends ChartComponentBase {
+    getRequiredSpace(): ComponentSpace;
+}
+export interface LayoutAwareComponent<TConfig = unknown> extends ChartComponent<TConfig>, LayoutAwareComponentBase {
+}

package/{donut-center-content.d.ts → dist/donut-center-content.d.ts}

@@ -27,7 +27,7 @@ export declare class DonutCenterContent implements ChartComponent<DonutCenterCon
     private readonly config;
     constructor(config?: DonutCenterContentConfig);
     getExportConfig(): DonutCenterContentConfigBase;
-    createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<DonutCenterContentConfigBase>): ChartComponent<DonutCenterContentConfigBase>;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, cx: number, cy: number, theme: ChartTheme, fontScale?: number): void;
 }
 export {};