@internetstiftelsen/charts 0.8.0 → 0.9.1

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,
@@ -139,22 +182,49 @@ export class BaseChart {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "readyPromise", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: Promise.resolve()
+        });
         Object.defineProperty(this, "disconnectedLegendContainer", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "renderThemeOverride", {
+            enumerable: true,
+            configurable: true,
+            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
+     */
+    addChild(component) {
+        this.registerBaseComponent(component);
+        return this;
     }
     /**
      * Renders the chart to the specified target element
@@ -203,29 +273,41 @@ export class BaseChart {
         const renderTheme = this.resolveRenderTheme(responsiveOverrides);
         const overrideComponents = this.createOverrideComponents(mergedComponentOverrides);
         const restoreComponents = this.applyComponentOverrides(overrideComponents);
-        const restoreTheme = this.applyThemeOverride(renderTheme);
+        const restoreTheme = this.applyRenderTheme(renderTheme);
         try {
+            this.setReadyPromise(Promise.resolve());
             // 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());
-            this.prepareLayout();
+            const svgNode = this.svg.node();
+            if (!svgNode) {
+                throw new Error('Failed to initialize chart SVG');
+            }
+            this.prepareLayout({
+                svg: this.svg,
+                svgNode,
+            });
             // Calculate layout
-            const layoutTheme = {
-                ...this.theme,
-                width: this.width,
-                height: this.height,
-            };
-            this.layoutManager = new LayoutManager(layoutTheme);
+            this.layoutManager = new LayoutManager(this.resolvedRenderTheme);
             const components = this.getLayoutComponents();
-            this.plotArea = this.layoutManager.calculateLayout(components);
+            const plotArea = this.layoutManager.calculateLayout(components);
+            this.plotArea = plotArea;
             // Create plot group
-            this.plotGroup = this.svg.append('g').attr('class', 'chart-plot');
+            const plotGroup = this.svg.append('g').attr('class', 'chart-plot');
+            this.plotGroup = plotGroup;
             // Render chart content
-            this.renderChart();
+            this.renderChart({
+                svg: this.svg,
+                svgNode,
+                plotGroup,
+                plotArea,
+            });
             this.renderDisconnectedLegend();
         }
         finally {
@@ -234,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) {
@@ -270,14 +382,23 @@ export class BaseChart {
         }
         return mergeDeep(this.theme, responsiveOverrides.theme);
     }
-    applyThemeOverride(theme) {
+    applyRenderTheme(theme) {
         if (theme === this.theme) {
             return () => { };
         }
-        const originalTheme = this.theme;
-        this.theme = theme;
+        this.renderThemeOverride = theme;
         return () => {
-            this.theme = originalTheme;
+            this.renderThemeOverride = null;
+        };
+    }
+    get renderTheme() {
+        return this.renderThemeOverride ?? this.theme;
+    }
+    get resolvedRenderTheme() {
+        return {
+            ...this.renderTheme,
+            width: this.width,
+            height: this.height,
         };
     }
     /**
@@ -285,50 +406,74 @@ export class BaseChart {
      * Override in subclasses to provide chart-specific components
      */
     getLayoutComponents() {
+        return this.getBaseLayoutComponents({
+            title: true,
+            xAxis: true,
+            yAxis: true,
+            inlineLegend: true,
+        });
+    }
+    getBaseLayoutComponents(options) {
         const components = [];
-        if (this.title) {
+        if (options.title && this.title) {
             components.push(this.title);
         }
-        if (this.xAxis) {
+        if (options.xAxis && this.xAxis) {
             components.push(this.xAxis);
         }
-        if (this.yAxis) {
+        if (options.yAxis && this.yAxis) {
             components.push(this.yAxis);
         }
-        if (this.legend?.isInlineMode()) {
+        if (options.inlineLegend && this.legend?.isInlineMode()) {
             components.push(this.legend);
         }
         return components;
     }
     getExportComponents() {
+        return this.getBaseExportComponents({
+            title: true,
+            grid: true,
+            xAxis: true,
+            yAxis: true,
+            tooltip: true,
+            legend: true,
+        });
+    }
+    getOverrideableComponents() {
+        return this.getExportComponents();
+    }
+    getBaseExportComponents(options) {
         const components = [];
-        if (this.title) {
+        if (options.title && this.title) {
             components.push(this.title);
         }
-        if (this.grid) {
+        if (options.grid && this.grid) {
             components.push(this.grid);
         }
-        if (this.xAxis) {
+        if (options.xAxis && this.xAxis) {
             components.push(this.xAxis);
         }
-        if (this.yAxis) {
+        if (options.yAxis && this.yAxis) {
             components.push(this.yAxis);
         }
-        if (this.tooltip) {
+        if (options.tooltip && this.tooltip) {
             components.push(this.tooltip);
         }
-        if (this.legend) {
+        if (options.legend && this.legend) {
             components.push(this.legend);
         }
         return components;
     }
+    registerBaseComponent(component) {
+        return this.tryRegisterComponent(component, this.getBaseComponentSlots());
+    }
     collectExportOverrides(context) {
         const overrides = new Map();
         const components = this.getExportComponents();
         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) {
@@ -339,34 +484,66 @@ export class BaseChart {
     }
     collectResponsiveOverrides(context) {
         const beforeRender = this.responsiveConfig?.beforeRender;
-        const components = this.getExportComponents();
-        const componentOverrides = new Map();
+        const components = this.getOverrideableComponents();
+        const breakpointOverrides = this.collectResponsiveBreakpointOverrides(context, components);
         if (!beforeRender) {
-            return {
-                components: componentOverrides,
-            };
+            return breakpointOverrides;
+        }
+        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 snapshots = components.map((component, index) => {
+        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') {
@@ -381,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) {
@@ -418,38 +592,7 @@ export class BaseChart {
         return overrideComponents;
     }
     applyComponentOverrides(overrides) {
-        if (overrides.size === 0) {
-            return () => { };
-        }
-        const previousState = {
-            title: this.title,
-            grid: this.grid,
-            xAxis: this.xAxis,
-            yAxis: this.yAxis,
-            tooltip: this.tooltip,
-            legend: this.legend,
-        };
-        const resolve = (component) => {
-            if (!component) {
-                return component;
-            }
-            const override = overrides.get(component);
-            return override ?? component;
-        };
-        this.title = resolve(this.title);
-        this.grid = resolve(this.grid);
-        this.xAxis = resolve(this.xAxis);
-        this.yAxis = resolve(this.yAxis);
-        this.tooltip = resolve(this.tooltip);
-        this.legend = resolve(this.legend);
-        return () => {
-            this.title = previousState.title;
-            this.grid = previousState.grid;
-            this.xAxis = previousState.xAxis;
-            this.yAxis = previousState.yAxis;
-            this.tooltip = previousState.tooltip;
-            this.legend = previousState.legend;
-        };
+        return this.applySlotOverrides(overrides, this.getBaseComponentSlots());
     }
     renderExportChart(chart, width, height) {
         const container = document.createElement('div');
@@ -465,18 +608,59 @@ export class BaseChart {
         container.style.visibility = 'hidden';
         document.body.appendChild(container);
         chart.render(`#${containerId}`);
-        const svg = chart.svg?.node();
-        if (!svg) {
+        return chart
+            .whenReady()
+            .then(() => {
+            const svg = chart.svg?.node();
+            if (!svg) {
+                throw new Error('Failed to render export SVG');
+            }
+            return svg;
+        })
+            .finally(() => {
             chart.destroy();
             document.body.removeChild(container);
-            throw new Error('Failed to render export SVG');
+        });
+    }
+    renderTitle(svg) {
+        if (!this.title) {
+            return;
         }
-        chart.destroy();
-        document.body.removeChild(container);
-        return svg;
+        const position = this.layoutManager.getComponentPosition(this.title);
+        this.title.render(svg, this.renderTheme, this.width, position.x, position.y);
+    }
+    renderInlineLegend(svg) {
+        if (!this.legend?.isInlineMode()) {
+            return;
+        }
+        const position = this.layoutManager.getComponentPosition(this.legend);
+        this.legend.render(svg, this.getLegendSeries(), this.renderTheme, this.width, position.x, position.y);
+    }
+    measureInlineLegend(svgNode) {
+        if (!this.legend?.isInlineMode()) {
+            return;
+        }
+        this.legend.estimateLayoutSpace(this.getLegendSeries(), this.renderTheme, this.width, svgNode);
+    }
+    filterVisibleItems(items, getDataKey) {
+        const { legend } = this;
+        if (!legend) {
+            return items;
+        }
+        return items.filter((item) => {
+            return legend.isSeriesVisible(getDataKey(item));
+        });
+    }
+    validateSourceData(_data) { }
+    syncDerivedState(_previousData) { }
+    initializeDataState() {
+        this.validateSourceData(this.sourceData);
+        this.syncDerivedState();
     }
     // Hook for subclasses to update component layout estimates before layout calc
-    prepareLayout() { }
+    prepareLayout(context) {
+        this.measureInlineLegend(context.svgNode);
+    }
     /**
      * Setup ResizeObserver for automatic resize handling
      */
@@ -486,9 +670,15 @@ export class BaseChart {
         if (this.resizeObserver) {
             this.resizeObserver.disconnect();
         }
-        this.resizeObserver = new ResizeObserver(() => this.performRender());
+        this.resizeObserver = new ResizeObserver(() => this.rerender());
         this.resizeObserver.observe(this.container);
     }
+    setReadyPromise(promise) {
+        this.readyPromise = promise;
+    }
+    whenReady() {
+        return this.readyPromise;
+    }
     getLegendSeries() {
         return [];
     }
@@ -532,14 +722,17 @@ export class BaseChart {
      * Updates the chart with new data
      */
     update(data) {
+        if (!this.container) {
+            throw new Error('Chart must be rendered before update()');
+        }
+        this.validateSourceData(data);
         const normalized = normalizeChartData(data);
         ChartValidator.validateData(normalized.data);
+        const previousData = this.data;
         this.sourceData = data;
         this.data = normalized.data;
-        if (!this.container) {
-            throw new Error('Chart must be rendered before update()');
-        }
-        this.performRender();
+        this.syncDerivedState(previousData);
+        this.rerender();
     }
     /**
      * Destroys the chart and cleans up resources
@@ -588,10 +781,10 @@ export class BaseChart {
         if (!svgNode) {
             return;
         }
-        this.legend.estimateLayoutSpace(series, this.theme, this.width, svgNode);
+        this.legend.estimateLayoutSpace(series, this.renderTheme, this.width, svgNode);
         const legendHeight = Math.max(1, this.legend.getMeasuredHeight());
         legendSvg.attr('height', legendHeight);
-        this.legend.render(legendSvg, series, this.theme, this.width);
+        this.legend.render(legendSvg, series, this.renderTheme, this.width);
     }
     resolveDisconnectedLegendHost() {
         if (!this.legend || !this.container) {
@@ -638,6 +831,109 @@ export class BaseChart {
         }
         return 0;
     }
+    rerender() {
+        if (!this.container) {
+            return;
+        }
+        this.performRender();
+    }
+    tryRegisterComponent(component, slots) {
+        const slot = slots.find((entry) => entry.type === component.type);
+        if (!slot) {
+            return false;
+        }
+        slot.set(component);
+        slot.onRegister?.(component);
+        return true;
+    }
+    applySlotOverrides(overrides, slots) {
+        if (overrides.size === 0) {
+            return () => { };
+        }
+        const previousState = new Map();
+        slots.forEach((slot) => {
+            previousState.set(slot, slot.get());
+            const current = slot.get();
+            if (!current) {
+                return;
+            }
+            const override = overrides.get(current);
+            if (override) {
+                slot.set(override);
+            }
+        });
+        return () => {
+            slots.forEach((slot) => {
+                slot.set(previousState.get(slot) ?? null);
+            });
+        };
+    }
+    applyArrayComponentOverrides(components, overrides, isComponent) {
+        if (overrides.size === 0) {
+            return () => { };
+        }
+        const previousState = [...components];
+        components.forEach((component, index) => {
+            const override = overrides.get(component);
+            if (override && isComponent(override)) {
+                components[index] = override;
+            }
+        });
+        return () => {
+            components.splice(0, components.length, ...previousState);
+        };
+    }
+    getBaseComponentSlots() {
+        return [
+            {
+                type: 'title',
+                get: () => this.title,
+                set: (component) => {
+                    this.title = component;
+                },
+            },
+            {
+                type: 'grid',
+                get: () => this.grid,
+                set: (component) => {
+                    this.grid = component;
+                },
+            },
+            {
+                type: 'xAxis',
+                get: () => this.xAxis,
+                set: (component) => {
+                    this.xAxis = component;
+                },
+            },
+            {
+                type: 'yAxis',
+                get: () => this.yAxis,
+                set: (component) => {
+                    this.yAxis = component;
+                },
+            },
+            {
+                type: 'tooltip',
+                get: () => this.tooltip,
+                set: (component) => {
+                    this.tooltip = component;
+                },
+            },
+            {
+                type: 'legend',
+                get: () => this.legend,
+                set: (component) => {
+                    this.legend = component;
+                },
+                onRegister: (component) => {
+                    component.setToggleCallback(() => {
+                        this.rerender();
+                    });
+                },
+            },
+        ];
+    }
     /**
      * Exports the chart in the specified format
      * @param format - The export format
@@ -647,7 +943,7 @@ export class BaseChart {
     async export(format, options) {
         let content;
         if (format === 'svg') {
-            content = this.exportSVG(options, 'svg');
+            content = await this.exportSVG(options, 'svg');
         }
         else if (format === 'json') {
             content = this.exportJSON();
@@ -723,7 +1019,7 @@ export class BaseChart {
     }
     async exportImage(format, options) {
         const { width, height } = this.exportSize(options);
-        const svg = this.exportSVG(options, format);
+        const svg = await this.exportSVG(options, format);
         const backgroundColor = options?.backgroundColor ??
             (format === 'jpg' ? '#ffffff' : undefined);
         return exportRasterBlob({
@@ -738,7 +1034,7 @@ export class BaseChart {
     }
     async exportPDF(options) {
         const { width, height } = this.exportSize(options);
-        const svg = this.exportSVG(options, 'pdf');
+        const svg = await this.exportSVG(options, 'pdf');
         const pngBlob = await exportRasterBlob({
             format: 'png',
             svg,
@@ -754,14 +1050,19 @@ export class BaseChart {
             margin: options?.pdfMargin ?? 0,
         });
     }
-    exportSVG(options, formatForHooks = 'svg') {
+    async exportSVG(options, formatForHooks = 'svg') {
         if (!this.svg) {
             throw new Error('Chart must be rendered before export');
         }
+        await this.whenReady();
+        const liveSvg = this.svg?.node();
+        if (!liveSvg) {
+            throw new Error('Chart must remain mounted until export completes');
+        }
         const exportWidth = options?.width ?? this.width;
         const exportHeight = options?.height ?? this.height;
         const requiresExportRender = exportWidth !== this.width || exportHeight !== this.height;
-        const clone = this.svg.node().cloneNode(true);
+        const clone = liveSvg.cloneNode(true);
         clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         clone.setAttribute('width', String(exportWidth));
         clone.setAttribute('height', String(exportHeight));
@@ -777,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;
@@ -791,7 +1097,7 @@ export class BaseChart {
                 exportChart.addChild(component);
             }
         });
-        const exportSvg = this.renderExportChart(exportChart, exportWidth, exportHeight);
+        const exportSvg = await this.renderExportChart(exportChart, exportWidth, exportHeight);
         exportSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         exportSvg.setAttribute('width', String(exportWidth));
         exportSvg.setAttribute('height', String(exportHeight));
@@ -799,6 +1105,7 @@ export class BaseChart {
             ...baseContext,
             svg: exportSvg,
         });
+        this.syncAccessibleLabelFromSvg(exportSvg);
         return exportSvg.outerHTML;
     }
     exportJSON() {