@internetstiftelsen/charts 0.9.0 → 0.9.1

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

@@ -1,14 +1,23 @@
 import type { DataItem, LegendSeries } from './types.js';
 import { type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
-import type { ChartComponent } from './chart-interface.js';
+import type { ChartComponentBase } from './chart-interface.js';
 import { RadialChartBase } from './radial-chart-base.js';
 export type DonutConfig = {
     innerRadius?: number;
     padAngle?: number;
     cornerRadius?: number;
 };
+export type DonutValueLabelPosition = 'outside' | 'auto';
+export type DonutValueLabelConfig = {
+    show?: boolean;
+    position?: DonutValueLabelPosition;
+    outsideOffset?: number;
+    minVerticalSpacing?: number;
+    formatter?: (label: string, value: number, data: DataItem, percentage: number) => string;
+};
 export type DonutChartConfig = BaseChartConfig & {
     donut?: DonutConfig;
+    valueLabel?: DonutValueLabelConfig;
     valueKey?: string;
     labelKey?: string;
 };
@@ -18,19 +27,25 @@ export declare class DonutChart extends RadialChartBase {
     private readonly cornerRadius;
     private readonly valueKey;
     private readonly labelKey;
+    private readonly valueLabel;
     private segments;
     private centerContent;
     constructor(config: DonutChartConfig);
     private validateDonutData;
     private prepareSegments;
-    addChild(component: ChartComponent): this;
-    protected getExportComponents(): ChartComponent[];
+    addChild(component: ChartComponentBase): this;
+    protected getExportComponents(): ChartComponentBase[];
     update(data: DataItem[]): void;
     protected createExportChart(): RadialChartBase;
-    protected applyComponentOverrides(overrides: Map<ChartComponent, ChartComponent>): () => void;
+    protected applyComponentOverrides(overrides: Map<ChartComponentBase, ChartComponentBase>): () => void;
     protected syncDerivedState(): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
     protected getLegendSeries(): LegendSeries[];
     private buildTooltipContent;
+    private formatValueLabelText;
     private renderSegments;
+    private renderLabels;
+    private getArcPoint;
+    private resolveOutsideLabel;
+    private adjustOutsideLabelPositions;
 }

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

@@ -4,6 +4,8 @@ import { ChartValidator } from './validation.js';
 import { RadialChartBase } from './radial-chart-base.js';
 const HOVER_EXPAND_PX = 8;
 const ANIMATION_DURATION_MS = 150;
+const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
+const OUTSIDE_LABEL_LINE_INSET_PX = 4;
 export class DonutChart extends RadialChartBase {
     constructor(config) {
         super(config);
@@ -37,6 +39,12 @@ export class DonutChart extends RadialChartBase {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "segments", {
             enumerable: true,
             configurable: true,
@@ -56,6 +64,14 @@ export class DonutChart extends RadialChartBase {
         this.cornerRadius = donut.cornerRadius ?? this.theme.donut.cornerRadius;
         this.valueKey = config.valueKey ?? 'value';
         this.labelKey = config.labelKey ?? 'name';
+        this.valueLabel = {
+            show: config.valueLabel?.show ?? false,
+            position: config.valueLabel?.position ?? 'auto',
+            outsideOffset: config.valueLabel?.outsideOffset ?? 16,
+            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ?? 14,
+            formatter: config.valueLabel?.formatter ??
+                ((label, value, _data, _percentage) => `${label}: ${value}`),
+        };
         this.initializeDataState();
     }
     validateDonutData() {
@@ -68,13 +84,20 @@ export class DonutChart extends RadialChartBase {
                 throw new Error(`DonutChart: data item at index ${index} has negative value '${item[this.valueKey]}' for key '${this.valueKey}'`);
             }
         }
+        if (this.valueLabel.outsideOffset < 0) {
+            throw new Error(`DonutChart: valueLabel.outsideOffset must be >= 0, received '${this.valueLabel.outsideOffset}'`);
+        }
+        if (this.valueLabel.minVerticalSpacing < 0) {
+            throw new Error(`DonutChart: valueLabel.minVerticalSpacing must be >= 0, received '${this.valueLabel.minVerticalSpacing}'`);
+        }
     }
     prepareSegments() {
         this.segments = this.data.map((item, index) => ({
             label: String(item[this.labelKey]),
             value: this.parseValue(item[this.valueKey]),
-            color: item.color ||
+            color: (typeof item['color'] === 'string' ? item['color'] : null) ||
                 this.theme.colorPalette[index % this.theme.colorPalette.length],
+            source: item,
         }));
     }
     addChild(component) {
@@ -109,6 +132,8 @@ export class DonutChart extends RadialChartBase {
     createExportChart() {
         return new DonutChart({
             data: this.data,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
             theme: this.theme,
             responsive: this.responsiveConfig,
             donut: {
@@ -116,6 +141,7 @@ export class DonutChart extends RadialChartBase {
                 padAngle: this.padAngle,
                 cornerRadius: this.cornerRadius,
             },
+            valueLabel: this.valueLabel,
             valueKey: this.valueKey,
             labelKey: this.labelKey,
         });
@@ -145,7 +171,12 @@ export class DonutChart extends RadialChartBase {
         const visibleSegments = this.getVisibleRadialItems(this.segments);
         const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
         this.initializeTooltip();
-        this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
+        const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
+        if (this.valueLabel.show && visibleSegments.length > 0) {
+            this.renderLabels(segmentGroup, pieData, outerRadius, visibleSegments.reduce((sum, segment) => {
+                return sum + segment.value;
+            }, 0), fontScale);
+        }
         if (this.centerContent) {
             this.centerContent.render(svg, cx, cy, this.renderTheme, fontScale);
         }
@@ -168,6 +199,9 @@ export class DonutChart extends RadialChartBase {
         }
         return `<strong>${d.data.label}</strong><br/>${d.data.value} (${percentage}%)`;
     }
+    formatValueLabelText(segment, total) {
+        return this.valueLabel.formatter(segment.label, segment.value, segment.source, total > 0 ? (segment.value / total) * 100 : 0);
+    }
     renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
         const pieGenerator = pie()
             .value((d) => d.value)
@@ -232,5 +266,109 @@ export class DonutChart extends RadialChartBase {
                 tooltipDiv.style('visibility', 'hidden');
             }
         });
+        return {
+            segmentGroup,
+            pieData,
+        };
+    }
+    renderLabels(segmentGroup, pieData, outerRadius, total, fontScale) {
+        if (pieData.length === 0) {
+            return;
+        }
+        const labelGroup = segmentGroup
+            .append('g')
+            .attr('class', 'donut-labels');
+        const fontSize = this.renderTheme.valueLabel.fontSize * fontScale;
+        const fontFamily = this.renderTheme.valueLabel.fontFamily;
+        const fontWeight = this.renderTheme.valueLabel.fontWeight;
+        const outsideLabels = pieData.map((datum) => this.resolveOutsideLabel(datum, outerRadius));
+        const adjustedOutsideLabels = this.adjustOutsideLabelPositions(outsideLabels, outerRadius);
+        const linesGroup = labelGroup
+            .append('g')
+            .attr('class', 'donut-label-leader-lines');
+        adjustedOutsideLabels.forEach((outsideLabel) => {
+            const midAngle = (outsideLabel.datum.startAngle + outsideLabel.datum.endAngle) /
+                2;
+            const anchorX = outerRadius + this.valueLabel.outsideOffset;
+            const textX = outsideLabel.side === 'right'
+                ? anchorX + OUTSIDE_LABEL_TEXT_OFFSET_PX
+                : -anchorX - OUTSIDE_LABEL_TEXT_OFFSET_PX;
+            const lineEndX = outsideLabel.side === 'right'
+                ? textX - OUTSIDE_LABEL_TEXT_OFFSET_PX / 2
+                : textX + OUTSIDE_LABEL_TEXT_OFFSET_PX / 2;
+            const start = this.getArcPoint(midAngle, outerRadius + OUTSIDE_LABEL_LINE_INSET_PX);
+            const elbow = this.getArcPoint(midAngle, outerRadius + this.valueLabel.outsideOffset * 0.65);
+            const elbowY = outsideLabel.y;
+            linesGroup
+                .append('path')
+                .attr('class', `donut-label-line donut-label-line-${sanitizeForCSS(outsideLabel.datum.data.label)}`)
+                .attr('d', `M ${start.x},${start.y} L ${elbow.x},${elbowY} L ${lineEndX},${outsideLabel.y}`)
+                .attr('fill', 'none')
+                .attr('stroke', this.renderTheme.valueLabel.border)
+                .attr('stroke-width', 1);
+            labelGroup
+                .append('text')
+                .attr('class', `donut-label donut-label--outside donut-label-${sanitizeForCSS(outsideLabel.datum.data.label)}`)
+                .attr('x', textX)
+                .attr('y', outsideLabel.y)
+                .attr('text-anchor', outsideLabel.textAnchor)
+                .attr('dominant-baseline', 'middle')
+                .attr('font-family', fontFamily)
+                .attr('font-size', `${fontSize}px`)
+                .attr('font-weight', fontWeight)
+                .attr('fill', this.renderTheme.valueLabel.color)
+                .text(this.formatValueLabelText(outsideLabel.datum.data, total));
+        });
+    }
+    getArcPoint(angle, radius) {
+        return {
+            x: Math.sin(angle) * radius,
+            y: -Math.cos(angle) * radius,
+        };
+    }
+    resolveOutsideLabel(datum, outerRadius) {
+        const midAngle = (datum.startAngle + datum.endAngle) / 2;
+        const point = this.getArcPoint(midAngle, outerRadius + this.valueLabel.outsideOffset);
+        const side = point.x >= 0 ? 'right' : 'left';
+        return {
+            datum,
+            y: point.y,
+            side,
+            textAnchor: side === 'right' ? 'start' : 'end',
+        };
+    }
+    adjustOutsideLabelPositions(labels, outerRadius) {
+        const adjustForSide = (side) => {
+            const sideLabels = labels
+                .filter((label) => label.side === side)
+                .sort((a, b) => a.y - b.y);
+            if (sideLabels.length === 0) {
+                return [];
+            }
+            const topLimit = -outerRadius;
+            const bottomLimit = outerRadius;
+            sideLabels[0].y = Math.max(topLimit, sideLabels[0].y);
+            for (let i = 1; i < sideLabels.length; i++) {
+                const minY = sideLabels[i - 1].y + this.valueLabel.minVerticalSpacing;
+                sideLabels[i].y = Math.max(sideLabels[i].y, minY);
+            }
+            const overflow = sideLabels[sideLabels.length - 1].y - bottomLimit;
+            if (overflow > 0) {
+                sideLabels[sideLabels.length - 1].y -= overflow;
+                for (let i = sideLabels.length - 2; i >= 0; i--) {
+                    const maxY = sideLabels[i + 1].y -
+                        this.valueLabel.minVerticalSpacing;
+                    sideLabels[i].y = Math.min(sideLabels[i].y, maxY);
+                }
+                const underflow = topLimit - sideLabels[0].y;
+                if (underflow > 0) {
+                    sideLabels.forEach((label) => {
+                        label.y += underflow;
+                    });
+                }
+            }
+            return sideLabels;
+        };
+        return [...adjustForSide('left'), ...adjustForSide('right')];
     }
 }

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

@@ -1,6 +1,6 @@
 import type { DataItem, LegendSeries } from './types.js';
 import { BaseChart, type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
-import type { ChartComponent } from './chart-interface.js';
+import type { ChartComponentBase } from './chart-interface.js';
 export type GaugeSegment = {
     from: number;
     to: number;
@@ -120,7 +120,7 @@ export declare class GaugeChart extends BaseChart {
     private clampToDomain;
     private prepareSegments;
     private defaultFormat;
-    protected getExportComponents(): ChartComponent[];
+    protected getExportComponents(): ChartComponentBase[];
     update(data: DataItem[]): void;
     protected createExportChart(): BaseChart;
     protected syncDerivedState(): void;

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

@@ -685,6 +685,8 @@ export class GaugeChart extends BaseChart {
     createExportChart() {
         return new GaugeChart({
             data: this.data,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
             theme: this.theme,
             responsive: this.responsiveConfig,
             valueKey: this.valueKey,

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

@@ -8,6 +8,6 @@ export declare class Grid implements ChartComponent<GridConfigBase> {
     readonly exportHooks?: ExportHooks<GridConfigBase>;
     constructor(config?: GridConfig);
     getExportConfig(): GridConfigBase;
-    createExportComponent(override?: Partial<GridConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<GridConfigBase>): ChartComponent<GridConfigBase>;
     render(plotGroup: Selection<SVGGElement, undefined, null, undefined>, x: D3Scale, y: D3Scale, theme: ChartTheme): void;
 }

package/{layout-manager.d.ts → dist/layout-manager.d.ts}

@@ -1,5 +1,5 @@
-import type { LayoutAwareComponent } from './chart-interface.js';
-import type { ChartTheme } from './types.js';
+import type { LayoutAwareComponentBase } from './chart-interface.js';
+import type { ResolvedChartTheme } from './types.js';
 export type PlotAreaBounds = {
     left: number;
     right: number;
@@ -20,16 +20,16 @@ export declare class LayoutManager {
     private theme;
     private plotBounds;
     private componentPositions;
-    constructor(theme: ChartTheme);
+    constructor(theme: ResolvedChartTheme);
     /**
      * Calculate layout based on registered components
      * Returns the plot area bounds
      */
-    calculateLayout(components: LayoutAwareComponent[]): PlotAreaBounds;
+    calculateLayout(components: LayoutAwareComponentBase[]): PlotAreaBounds;
     /**
      * Get the position for a specific component
      */
-    getComponentPosition(component: LayoutAwareComponent): ComponentPosition;
+    getComponentPosition(component: LayoutAwareComponentBase): ComponentPosition;
     /**
      * Calculate positions for all components based on their space requirements
      * Components are positioned in registration order, stacking outward from the plot area

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

@@ -20,7 +20,7 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     private estimatedLayoutSignature;
     constructor(config?: LegendConfig);
     getExportConfig(): LegendConfigBase;
-    createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent;
+    createExportComponent(override?: Partial<LegendConfigBase>): LayoutAwareComponent<LegendConfigBase>;
     setToggleCallback(callback: () => void): void;
     isInlineMode(): boolean;
     isDisconnectedMode(): boolean;
@@ -40,6 +40,8 @@ export declare class Legend implements LayoutAwareComponent<LegendConfigBase> {
     getRequiredSpace(): ComponentSpace;
     getMeasuredHeight(): number;
     render(svg: Selection<SVGSVGElement, undefined, null, undefined>, series: LegendSeries[], theme: ChartTheme, width: number, _x?: number, y?: number): void;
+    private isLegendItemVisible;
+    private isToggleActivationKey;
     private computeLayout;
     private resolveLayoutSettings;
     private buildLegendItems;

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

@@ -232,10 +232,36 @@ export class Legend {
             .selectAll('g')
             .data(layout.positionedItems)
             .join('g')
+            .attr('class', 'legend-item')
             .attr('transform', (d) => `translate(${d.x}, ${d.y})`)
+            .attr('tabindex', 0)
+            .attr('role', 'checkbox')
+            .attr('aria-label', (d) => `Toggle series ${d.label}`)
+            .attr('aria-checked', (d) => {
+            return String(this.isLegendItemVisible(d.dataKey));
+        })
             .style('cursor', 'pointer')
             .on('click', (_event, d) => {
             this.toggleSeries(d.dataKey);
+        })
+            .on('keydown', (event, d) => {
+            if (!this.isToggleActivationKey(event.key)) {
+                return;
+            }
+            event.preventDefault();
+            this.toggleSeries(d.dataKey);
+        })
+            .on('focus', function () {
+            select(this)
+                .select('rect')
+                .attr('stroke', '#111827')
+                .attr('stroke-width', 2);
+        })
+            .on('blur', function () {
+            select(this)
+                .select('rect')
+                .attr('stroke', null)
+                .attr('stroke-width', null);
         });
         // Add checkbox rect
         legendGroups
@@ -269,6 +295,12 @@ export class Legend {
             .attr('font-family', theme.axis.fontFamily)
             .text((d) => d.label);
     }
+    isLegendItemVisible(dataKey) {
+        return this.visibilityState.get(dataKey) ?? true;
+    }
+    isToggleActivationKey(key) {
+        return key === 'Enter' || key === ' ' || key === 'Spacebar';
+    }
     computeLayout(series, theme, width, svg) {
         const settings = this.resolveLayoutSettings(theme);
         const legendItems = this.buildLegendItems(series);

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

@@ -10,7 +10,7 @@ export declare class Line implements ChartComponent<LineConfigBase> {
     readonly exportHooks?: ExportHooks<LineConfigBase>;
     constructor(config: LineConfig);
     getExportConfig(): LineConfigBase;
-    createExportComponent(override?: Partial<LineConfigBase>): ChartComponent;
+    createExportComponent(override?: Partial<LineConfigBase>): ChartComponent<LineConfigBase>;
     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/{pie-chart.d.ts → dist/pie-chart.d.ts}

@@ -1,6 +1,6 @@
 import type { DataItem, LegendSeries } from './types.js';
 import { type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
-import type { ChartComponent } from './chart-interface.js';
+import type { ChartComponentBase } from './chart-interface.js';
 import { RadialChartBase } from './radial-chart-base.js';
 export type PieSort = 'none' | 'ascending' | 'descending' | ((a: PieSegmentData, b: PieSegmentData) => number);
 export type PieConfig = {
@@ -19,19 +19,11 @@ export type PieValueLabelConfig = {
     outsideOffset?: number;
     insideMargin?: number;
     minVerticalSpacing?: number;
-};
-export type PieLabelsConfig = {
-    show?: boolean;
-    mode?: 'adaptive' | 'inside' | 'outside';
-    minInsidePercentage?: number;
-    outsideOffset?: number;
-    minVerticalSpacing?: number;
+    formatter?: (label: string, value: number, data: DataItem, percentage: number) => string;
 };
 export type PieChartConfig = BaseChartConfig & {
     pie?: PieConfig;
     valueLabel?: PieValueLabelConfig;
-    /** @deprecated Use valueLabel instead */
-    labels?: PieLabelsConfig;
     valueKey?: string;
     labelKey?: string;
 };
@@ -56,8 +48,9 @@ export declare class PieChart extends RadialChartBase {
     private validatePieData;
     private prepareSegments;
     private warnOnTinySlices;
-    protected getExportComponents(): ChartComponent[];
+    protected getExportComponents(): ChartComponentBase[];
     update(data: DataItem[]): void;
+    private formatValueLabelText;
     protected createExportChart(): RadialChartBase;
     protected syncDerivedState(): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;

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

@@ -81,21 +81,15 @@ export class PieChart extends RadialChartBase {
         this.sort = pieConfig.sort ?? 'none';
         this.valueKey = config.valueKey ?? 'value';
         this.labelKey = config.labelKey ?? 'name';
-        const legacyLabels = config.labels;
-        const legacyPosition = legacyLabels?.mode === 'adaptive' ? 'auto' : legacyLabels?.mode;
         this.valueLabel = {
-            show: config.valueLabel?.show ?? legacyLabels?.show ?? false,
-            position: config.valueLabel?.position ?? legacyPosition ?? 'auto',
-            minInsidePercentage: config.valueLabel?.minInsidePercentage ??
-                legacyLabels?.minInsidePercentage ??
-                8,
-            outsideOffset: config.valueLabel?.outsideOffset ??
-                legacyLabels?.outsideOffset ??
-                16,
+            show: config.valueLabel?.show ?? false,
+            position: config.valueLabel?.position ?? 'auto',
+            minInsidePercentage: config.valueLabel?.minInsidePercentage ?? 8,
+            outsideOffset: config.valueLabel?.outsideOffset ?? 16,
             insideMargin: config.valueLabel?.insideMargin ?? 8,
-            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ??
-                legacyLabels?.minVerticalSpacing ??
-                14,
+            minVerticalSpacing: config.valueLabel?.minVerticalSpacing ?? 14,
+            formatter: config.valueLabel?.formatter ??
+                ((label, value, _data, _percentage) => `${label}: ${value}`),
         };
         this.initializeDataState();
     }
@@ -148,7 +142,9 @@ export class PieChart extends RadialChartBase {
             nextSegments.push({
                 label,
                 value,
-                color: item.color ||
+                color: (typeof item['color'] === 'string'
+                    ? item['color']
+                    : null) ||
                     this.theme.colorPalette[nextSegments.length % this.theme.colorPalette.length],
                 source: item,
             });
@@ -183,9 +179,14 @@ export class PieChart extends RadialChartBase {
     update(data) {
         super.update(data);
     }
+    formatValueLabelText(segment, total) {
+        return this.valueLabel.formatter(segment.label, segment.value, segment.source, total > 0 ? (segment.value / total) * 100 : 0);
+    }
     createExportChart() {
         return new PieChart({
             data: this.data,
+            width: this.configuredWidth,
+            height: this.configuredHeight,
             theme: this.theme,
             responsive: this.responsiveConfig,
             pie: {
@@ -416,7 +417,8 @@ export class PieChart extends RadialChartBase {
         const outsideLabels = [];
         pieData.forEach((d) => {
             const percentage = total > 0 ? (d.data.value / total) * 100 : 0;
-            const placement = this.resolveValueLabelPlacement(d, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
+            const labelText = this.formatValueLabelText(d.data, total);
+            const placement = this.resolveValueLabelPlacement(d, labelText, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
             if (placement === 'inside') {
                 const [x, y] = insideArc.centroid(d);
                 labelGroup
@@ -430,7 +432,7 @@ export class PieChart extends RadialChartBase {
                     .attr('font-size', `${fontSize}px`)
                     .attr('font-weight', fontWeight)
                     .attr('fill', getContrastTextColor(d.data.color))
-                    .text(d.data.label);
+                    .text(labelText);
                 return;
             }
             if (placement === 'outside') {
@@ -475,11 +477,11 @@ export class PieChart extends RadialChartBase {
                 .attr('font-size', `${fontSize}px`)
                 .attr('font-weight', fontWeight)
                 .attr('fill', this.renderTheme.valueLabel.color)
-                .text(outsideLabel.datum.data.label);
+                .text(this.formatValueLabelText(outsideLabel.datum.data, total));
         });
     }
-    resolveValueLabelPlacement(datum, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
-        const fitsInside = this.canFitInsideLabel(datum, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
+    resolveValueLabelPlacement(datum, labelText, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
+        const fitsInside = this.canFitInsideLabel(datum, labelText, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
         if (this.valueLabel.position === 'inside') {
             return fitsInside ? 'inside' : 'hidden';
         }
@@ -494,7 +496,7 @@ export class PieChart extends RadialChartBase {
         }
         return 'inside';
     }
-    canFitInsideLabel(datum, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
+    canFitInsideLabel(datum, labelText, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
         if (!this.svg) {
             return false;
         }
@@ -502,7 +504,7 @@ export class PieChart extends RadialChartBase {
         if (!svgNode) {
             return false;
         }
-        const textWidth = measureTextWidth(datum.data.label, fontSize, this.renderTheme.axis.fontFamily, fontWeight, svgNode);
+        const textWidth = measureTextWidth(labelText, fontSize, this.renderTheme.axis.fontFamily, fontWeight, svgNode);
         const angle = Math.max(0, datum.endAngle - datum.startAngle);
         const availableArcLength = angle * insideLabelRadius - this.valueLabel.insideMargin * 2;
         const availableRadialThickness = outerRadius - innerRadius - this.valueLabel.insideMargin * 2;

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

@@ -1,4 +1,5 @@
 import { BaseChart } from './base-chart.js';
+import { DEFAULT_CHART_HEIGHT } from './theme.js';
 const TOOLTIP_OFFSET_PX = 12;
 const EDGE_MARGIN_PX = 10;
 export class RadialChartBase extends BaseChart {
@@ -69,7 +70,8 @@ export class RadialChartBase extends BaseChart {
         tooltipDiv.style('left', `${x}px`).style('top', `${y}px`);
     }
     resolveRadialFontScale(outerRadius, theme) {
-        const plotHeight = Math.max(1, theme.height - theme.margins.top - theme.margins.bottom);
+        const referenceHeight = this.configuredHeight ?? DEFAULT_CHART_HEIGHT;
+        const plotHeight = Math.max(1, referenceHeight - theme.margins.top - theme.margins.bottom);
         const referenceRadius = Math.max(1, plotHeight / 2);
         const rawScale = outerRadius / referenceRadius;
         return Math.max(0.5, Math.min(1, rawScale));

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

@@ -1,5 +1,7 @@
 import { type ChartTheme, type ResponsiveConfig } from './types.js';
 export declare const DEFAULT_COLOR_PALETTE: string[];
+export declare const DEFAULT_CHART_WIDTH = 928;
+export declare const DEFAULT_CHART_HEIGHT = 600;
 export declare const defaultTheme: ChartTheme;
 export declare const newspaperTheme: ChartTheme;
 export declare const defaultResponsiveConfig: ResponsiveConfig;

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

@@ -8,9 +8,9 @@ export const DEFAULT_COLOR_PALETTE = [
     '#ff9fb4', // ruby-light
     '#1f2a36', // cyberspace
 ];
+export const DEFAULT_CHART_WIDTH = 928;
+export const DEFAULT_CHART_HEIGHT = 600;
 export const defaultTheme = {
-    width: 928,
-    height: 600,
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     margins: {
         top: 20,
@@ -25,7 +25,7 @@ export const defaultTheme = {
     colorPalette: [...DEFAULT_COLOR_PALETTE],
     axis: {
         fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        fontSize: '14',
+        fontSize: 14,
         fontWeight: 'normal',
         groupLabel: {
             fontWeight: '700',
@@ -82,8 +82,6 @@ export const defaultTheme = {
     },
 };
 export const newspaperTheme = {
-    width: 928,
-    height: 600,
     fontFamily: 'Georgia, "Times New Roman", Times, serif',
     margins: {
         top: 20,
@@ -107,7 +105,7 @@ export const newspaperTheme = {
     ],
     axis: {
         fontFamily: 'Georgia, "Times New Roman", Times, serif',
-        fontSize: '13',
+        fontSize: 13,
         fontWeight: '600',
         groupLabel: {
             fontWeight: '700',
@@ -166,29 +164,26 @@ export const newspaperTheme = {
 };
 export const defaultResponsiveConfig = {
     breakpoints: {
-        sm: 0,
-        md: 480,
-        lg: 768,
-    },
-    beforeRender({ breakpoint }) {
-        if (breakpoint === 'sm') {
-            return {
-                theme: {
-                    axis: { fontSize: '11' },
-                    legend: { fontSize: 11 },
-                    valueLabel: { fontSize: 10 },
-                },
-            };
-        }
-        if (breakpoint === 'md') {
-            return {
-                theme: {
-                    axis: { fontSize: '12' },
-                    legend: { fontSize: 12 },
-                    valueLabel: { fontSize: 11 },
-                },
-            };
-        }
+        sm: {
+            maxWidth: 479,
+            theme: {
+                axis: { fontSize: 11 },
+                legend: { fontSize: 11 },
+                valueLabel: { fontSize: 10 },
+            },
+        },
+        md: {
+            minWidth: 480,
+            maxWidth: 767,
+            theme: {
+                axis: { fontSize: 12 },
+                legend: { fontSize: 12 },
+                valueLabel: { fontSize: 11 },
+            },
+        },
+        lg: {
+            minWidth: 768,
+        },
     },
 };
 export const themes = {