@internetstiftelsen/charts 0.5.0 → 0.6.0

package/README.md

@@ -6,7 +6,7 @@ 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, bars) and DonutChart
+- **Multiple Chart Types** - XYChart (lines, areas, bars), DonutChart, PieChart, and GaugeChart
 - **Flexible Scales** - Band, linear, time, and logarithmic scales
 - **Auto Resize** - Built-in ResizeObserver handles responsive behavior
 - **Type Safe** - Written in TypeScript with full type definitions
@@ -60,8 +60,10 @@ await chart.export('pdf', { download: true, pdfMargin: 16 });
 ## Documentation
 
 - [Getting Started](./docs/getting-started.md) - Installation, Vanilla JS, React integration
-- [XYChart](./docs/xy-chart.md) - Line and bar charts API
+- [XYChart](./docs/xy-chart.md) - Line, area, and bar charts API
 - [DonutChart](./docs/donut-chart.md) - Donut/pie charts API
+- [PieChart](./docs/pie-chart.md) - Pie chart API
+- [GaugeChart](./docs/gauge-chart.md) - Gauge chart API
 - [Components](./docs/components.md) - Axes, Grid, Tooltip, Legend, Title
 - [Theming](./docs/theming.md) - Colors, fonts, and styling
 - [Advanced](./docs/advanced.md) - Scales, TypeScript, architecture, performance

package/area.d.ts

@@ -0,0 +1,26 @@
+import { type Selection } from 'd3';
+import type { AreaConfig, AreaCurveType, AreaConfigBase, AreaStackingContext, ChartTheme, D3Scale, DataItem, ExportHooks, LineValueLabelConfig, ScaleType } from './types.js';
+import type { ChartComponent } from './chart-interface.js';
+export declare class Area implements ChartComponent<AreaConfigBase> {
+    readonly type: "area";
+    readonly dataKey: string;
+    readonly fill: string;
+    readonly stroke: string;
+    readonly strokeWidth?: number;
+    readonly opacity: number;
+    readonly curve: AreaCurveType;
+    readonly stackId?: string | number;
+    readonly baseline: number;
+    readonly showLine: boolean;
+    readonly showPoints: boolean;
+    readonly pointSize?: number;
+    readonly valueLabel?: LineValueLabelConfig;
+    readonly exportHooks?: ExportHooks<AreaConfigBase>;
+    constructor(config: AreaConfig);
+    getExportConfig(): AreaConfigBase;
+    createExportComponent(override?: Partial<AreaConfigBase>): ChartComponent;
+    private getScaledPosition;
+    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/area.js

@@ -0,0 +1,331 @@
+import { area, curveBasis, curveCardinal, curveLinear, curveMonotoneX, curveNatural, curveStep, line, } from 'd3';
+import { mergeDeep, sanitizeForCSS } from './utils.js';
+const AREA_CURVE_FACTORIES = {
+    linear: curveLinear,
+    monotone: curveMonotoneX,
+    step: curveStep,
+    natural: curveNatural,
+    basis: curveBasis,
+    cardinal: curveCardinal,
+};
+export class Area {
+    constructor(config) {
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'area'
+        });
+        Object.defineProperty(this, "dataKey", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fill", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stroke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "strokeWidth", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "opacity", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "curve", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "stackId", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "baseline", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "showLine", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "showPoints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "pointSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "valueLabel", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "exportHooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        const fill = config.fill || '#8884d8';
+        this.dataKey = config.dataKey;
+        this.fill = fill;
+        this.stroke = config.stroke || fill;
+        this.strokeWidth = config.strokeWidth;
+        this.opacity = config.opacity ?? 0.3;
+        this.curve = config.curve || 'linear';
+        this.stackId = config.stackId;
+        this.baseline = config.baseline ?? 0;
+        this.showLine = config.showLine ?? true;
+        this.showPoints = config.showPoints ?? false;
+        this.pointSize = config.pointSize;
+        this.valueLabel = config.valueLabel;
+        this.exportHooks = config.exportHooks;
+    }
+    getExportConfig() {
+        return {
+            dataKey: this.dataKey,
+            fill: this.fill,
+            stroke: this.stroke,
+            strokeWidth: this.strokeWidth,
+            opacity: this.opacity,
+            curve: this.curve,
+            stackId: this.stackId,
+            baseline: this.baseline,
+            showLine: this.showLine,
+            showPoints: this.showPoints,
+            pointSize: this.pointSize,
+            valueLabel: this.valueLabel,
+        };
+    }
+    createExportComponent(override) {
+        const merged = mergeDeep(this.getExportConfig(), override);
+        return new Area({
+            ...merged,
+            exportHooks: this.exportHooks,
+        });
+    }
+    getScaledPosition(data, key, scale, scaleType) {
+        const value = data[key];
+        let scaledValue;
+        switch (scaleType) {
+            case 'band':
+                scaledValue = String(value);
+                break;
+            case 'time':
+                scaledValue =
+                    value instanceof Date ? value : new Date(String(value));
+                break;
+            case 'linear':
+            case 'log':
+                scaledValue = typeof value === 'number' ? value : Number(value);
+                break;
+        }
+        return scale(scaledValue) || 0;
+    }
+    getStackValues(dataPoint, xKey, parseValue, stackingContext) {
+        const value = parseValue(dataPoint[this.dataKey]);
+        if (!stackingContext || stackingContext.mode === 'none') {
+            return {
+                y0: this.baseline,
+                y1: value,
+            };
+        }
+        const categoryKey = String(dataPoint[xKey]);
+        const cumulative = stackingContext.cumulativeData.get(categoryKey) ?? 0;
+        if (stackingContext.mode === 'percent') {
+            const total = stackingContext.totalData.get(categoryKey) ?? 0;
+            if (total === 0) {
+                return { y0: 0, y1: 0 };
+            }
+            const y0 = (cumulative / total) * 100;
+            const y1 = ((cumulative + value) / total) * 100;
+            return { y0, y1 };
+        }
+        return {
+            y0: cumulative,
+            y1: cumulative + value,
+        };
+    }
+    render(plotGroup, data, xKey, x, y, parseValue, xScaleType = 'band', theme, stackingContext, valueLabelLayer) {
+        const getXPosition = (d) => {
+            const scaled = this.getScaledPosition(d.data, xKey, x, xScaleType);
+            return scaled + (x.bandwidth ? x.bandwidth() / 2 : 0);
+        };
+        const hasValidValue = (d) => {
+            const value = d[this.dataKey];
+            if (value === null || value === undefined) {
+                return false;
+            }
+            return Number.isFinite(parseValue(value));
+        };
+        const areaData = data.map((d) => {
+            const valid = hasValidValue(d);
+            const stackValues = valid
+                ? this.getStackValues(d, xKey, parseValue, stackingContext)
+                : { y0: this.baseline, y1: this.baseline };
+            return {
+                data: d,
+                valid,
+                y0: stackValues.y0,
+                y1: stackValues.y1,
+            };
+        });
+        const curveFactory = AREA_CURVE_FACTORIES[this.curve] || curveLinear;
+        const areaGenerator = area()
+            .defined((d) => d.valid)
+            .curve(curveFactory)
+            .x(getXPosition)
+            .y0((d) => y(d.y0) || 0)
+            .y1((d) => y(d.y1) || 0);
+        const areaOpacity = Math.max(0, Math.min(1, this.opacity));
+        const sanitizedKey = sanitizeForCSS(this.dataKey);
+        plotGroup
+            .append('path')
+            .datum(areaData)
+            .attr('class', `area-${sanitizedKey}`)
+            .attr('fill', this.fill)
+            .attr('fill-opacity', areaOpacity)
+            .attr('stroke', 'none')
+            .attr('d', areaGenerator);
+        if (this.showLine) {
+            const lineGenerator = line()
+                .defined((d) => d.valid)
+                .curve(curveFactory)
+                .x(getXPosition)
+                .y((d) => y(d.y1) || 0);
+            const lineStrokeWidth = this.strokeWidth ?? theme.line.strokeWidth;
+            plotGroup
+                .append('path')
+                .datum(areaData)
+                .attr('class', `area-line-${sanitizedKey}`)
+                .attr('fill', 'none')
+                .attr('stroke', this.stroke)
+                .attr('stroke-width', lineStrokeWidth)
+                .attr('d', lineGenerator);
+        }
+        if (this.showPoints) {
+            const validData = areaData.filter((d) => d.valid);
+            const pointSize = this.pointSize ?? theme.line.point.size;
+            const pointStrokeWidth = theme.line.point.strokeWidth;
+            const pointStrokeColor = theme.line.point.strokeColor || this.stroke;
+            const pointColor = theme.line.point.color || this.stroke;
+            plotGroup
+                .selectAll(`.area-point-${sanitizedKey}`)
+                .data(validData)
+                .join('circle')
+                .attr('class', `area-point-${sanitizedKey}`)
+                .attr('cx', getXPosition)
+                .attr('cy', (d) => y(d.y1) || 0)
+                .attr('r', pointSize)
+                .attr('fill', pointColor)
+                .attr('stroke', pointStrokeColor)
+                .attr('stroke-width', pointStrokeWidth);
+        }
+        if (this.valueLabel?.show) {
+            this.renderValueLabels(valueLabelLayer ?? plotGroup, areaData.filter((d) => d.valid), y, parseValue, theme, getXPosition);
+        }
+    }
+    renderValueLabels(plotGroup, data, y, parseValue, theme, getXPosition) {
+        const config = this.valueLabel;
+        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
+        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
+        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
+        const color = config.color ?? theme.valueLabel.color;
+        const background = config.background ?? theme.valueLabel.background ?? '#ffffff';
+        const border = config.border ?? theme.valueLabel.border;
+        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
+        const padding = config.padding ?? theme.valueLabel.padding;
+        const labelGroup = plotGroup
+            .append('g')
+            .attr('class', `area-value-labels-${sanitizeForCSS(this.dataKey)}`);
+        const plotTop = y.range()[1];
+        const plotBottom = y.range()[0];
+        data.forEach((d) => {
+            const rawValue = d.data[this.dataKey];
+            if (rawValue === null || rawValue === undefined) {
+                return;
+            }
+            const parsedValue = parseValue(rawValue);
+            if (!Number.isFinite(parsedValue)) {
+                return;
+            }
+            const valueText = String(parsedValue);
+            const xPos = getXPosition(d);
+            const yPos = y(d.y1) || 0;
+            const tempText = labelGroup
+                .append('text')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .text(valueText);
+            const textBBox = tempText.node().getBBox();
+            const boxWidth = textBBox.width + padding * 2;
+            const boxHeight = textBBox.height + padding * 2;
+            const labelX = xPos;
+            let labelY = yPos - boxHeight / 2 - theme.line.point.size - 4;
+            let shouldRender = true;
+            if (labelY - boxHeight / 2 < plotTop + 4) {
+                labelY = yPos + boxHeight / 2 + theme.line.point.size + 4;
+                if (labelY + boxHeight / 2 > plotBottom - 4) {
+                    shouldRender = false;
+                }
+            }
+            tempText.remove();
+            if (!shouldRender) {
+                return;
+            }
+            const group = labelGroup.append('g');
+            group
+                .append('rect')
+                .attr('x', labelX - boxWidth / 2)
+                .attr('y', labelY - boxHeight / 2)
+                .attr('width', boxWidth)
+                .attr('height', boxHeight)
+                .attr('rx', borderRadius)
+                .attr('ry', borderRadius)
+                .attr('fill', background)
+                .attr('stroke', border)
+                .attr('stroke-width', 1);
+            group
+                .append('text')
+                .attr('x', labelX)
+                .attr('y', labelY)
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'central')
+                .style('font-size', `${fontSize}px`)
+                .style('font-family', fontFamily)
+                .style('font-weight', fontWeight)
+                .style('fill', color)
+                .style('pointer-events', 'none')
+                .text(valueText);
+        });
+    }
+}

package/base-chart.d.ts

@@ -1,5 +1,5 @@
 import { type Selection } from 'd3';
-import type { DataItem, ChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext } from './types.js';
+import type { ChartData, DataItem, ChartTheme, AxisScaleConfig, ExportFormat, ExportOptions, D3Scale, ExportHookContext, ExportRenderContext } from './types.js';
 import type { ChartComponent, LayoutAwareComponent } from './chart-interface.js';
 import type { XAxis } from './x-axis.js';
 import type { YAxis } from './y-axis.js';
@@ -9,8 +9,13 @@ import type { Legend } from './legend.js';
 import type { Title } from './title.js';
 import { LayoutManager, type PlotAreaBounds } from './layout-manager.js';
 type VisualExportFormat = 'svg' | 'png' | 'jpg' | 'pdf';
+type RenderDimensions = {
+    width: number;
+    height: number;
+    svgHeightAttr: number | string;
+};
 export type BaseChartConfig = {
-    data: DataItem[];
+    data: ChartData;
     theme?: Partial<ChartTheme>;
     scales?: AxisScaleConfig;
 };
@@ -19,6 +24,7 @@ export type BaseChartConfig = {
  */
 export declare abstract class BaseChart {
     protected data: DataItem[];
+    protected sourceData: ChartData;
     protected readonly theme: ChartTheme;
     protected readonly scaleConfig: AxisScaleConfig;
     protected width: number;
@@ -51,6 +57,7 @@ export declare abstract class BaseChart {
      * Performs the actual rendering logic
      */
     private performRender;
+    protected resolveRenderDimensions(containerRect: DOMRect): RenderDimensions;
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
@@ -73,7 +80,7 @@ export declare abstract class BaseChart {
     /**
      * Updates the chart with new data
      */
-    update(data: DataItem[]): void;
+    update(data: ChartData): void;
     /**
      * Destroys the chart and cleans up resources
      */

package/base-chart.js

@@ -6,6 +6,7 @@ import { serializeCSV } from './export-tabular.js';
 import { exportRasterBlob } from './export-image.js';
 import { exportXLSXBlob } from './export-xlsx.js';
 import { exportPDFBlob } from './export-pdf.js';
+import { normalizeChartData } from './grouped-data.js';
 /**
  * Base chart class that provides common functionality for all chart types
  */
@@ -17,6 +18,12 @@ export class BaseChart {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "sourceData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "theme", {
             enumerable: true,
             configurable: true,
@@ -125,9 +132,10 @@ export class BaseChart {
             writable: true,
             value: null
         });
-        // Validate data
-        ChartValidator.validateData(config.data);
-        this.data = config.data;
+        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;
@@ -164,18 +172,17 @@ export class BaseChart {
      * Performs the actual rendering logic
      */
     performRender() {
-        if (!this.container)
+        if (!this.container) {
             return;
-        // Calculate current width
-        this.width =
-            this.container.getBoundingClientRect().width || this.theme.width;
-        this.height =
-            this.container.getBoundingClientRect().height || this.theme.height;
+        }
+        const dimensions = this.resolveRenderDimensions(this.container.getBoundingClientRect());
+        this.width = dimensions.width;
+        this.height = dimensions.height;
         // Clear and setup SVG
         this.container.innerHTML = '';
         this.svg = create('svg')
             .attr('width', '100%')
-            .attr('height', this.height)
+            .attr('height', dimensions.svgHeightAttr)
             .style('display', 'block');
         this.container.appendChild(this.svg.node());
         this.prepareLayout();
@@ -193,6 +200,15 @@ export class BaseChart {
         // Render chart content
         this.renderChart();
     }
+    resolveRenderDimensions(containerRect) {
+        const width = containerRect.width || this.theme.width;
+        const height = containerRect.height || this.theme.height;
+        return {
+            width,
+            height,
+            svgHeightAttr: '100%',
+        };
+    }
     /**
      * Get layout-aware components in order
      * Override in subclasses to provide chart-specific components
@@ -298,8 +314,10 @@ export class BaseChart {
      * Updates the chart with new data
      */
     update(data) {
-        ChartValidator.validateData(data);
-        this.data = data;
+        const normalized = normalizeChartData(data);
+        ChartValidator.validateData(normalized.data);
+        this.sourceData = data;
+        this.data = normalized.data;
         if (!this.container) {
             throw new Error('Chart must be rendered before update()');
         }
@@ -402,7 +420,7 @@ export class BaseChart {
         return 'application/pdf';
     }
     exportCSV(options) {
-        return serializeCSV(this.data, options);
+        return serializeCSV(this.sourceData, options);
     }
     exportSize(options) {
         return {
@@ -411,7 +429,7 @@ export class BaseChart {
         };
     }
     async exportXLSX(options) {
-        return exportXLSXBlob(this.data, options);
+        return exportXLSXBlob(this.sourceData, options);
     }
     async exportImage(format, options) {
         const { width, height } = this.exportSize(options);
@@ -493,10 +511,6 @@ export class BaseChart {
         return exportSvg.outerHTML;
     }
     exportJSON() {
-        return JSON.stringify({
-            data: this.data,
-            theme: this.theme,
-            scales: this.scaleConfig,
-        }, null, 2);
+        return JSON.stringify(this.sourceData, null, 2);
     }
 }

package/chart-interface.d.ts

@@ -1,6 +1,6 @@
 import type { ExportHooks } from './types.js';
 export interface ChartComponent<TConfig = any> {
-    type: 'line' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
+    type: 'line' | 'area' | 'bar' | 'xAxis' | 'yAxis' | 'grid' | 'tooltip' | 'legend' | 'title' | 'donutCenterContent';
     exportHooks?: ExportHooks<TConfig>;
 }
 export type ComponentSpace = {

package/donut-center-content.d.ts

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

package/donut-center-content.js

@@ -60,14 +60,14 @@ export class DonutCenterContent {
             exportHooks: this.exportHooks,
         });
     }
-    render(svg, cx, cy, theme) {
+    render(svg, cx, cy, theme, fontScale = 1) {
         const defaults = theme.donut.centerContent;
         const elements = [];
         if (this.mainValue) {
             const style = this.config.mainValueStyle;
             elements.push({
                 text: this.mainValue,
-                fontSize: style?.fontSize ?? defaults.mainValue.fontSize,
+                fontSize: (style?.fontSize ?? defaults.mainValue.fontSize) * fontScale,
                 fontWeight: style?.fontWeight ?? defaults.mainValue.fontWeight,
                 fontFamily: style?.fontFamily ??
                     defaults.mainValue.fontFamily ??
@@ -79,7 +79,7 @@ export class DonutCenterContent {
             const style = this.config.titleStyle;
             elements.push({
                 text: this.title,
-                fontSize: style?.fontSize ?? defaults.title.fontSize,
+                fontSize: (style?.fontSize ?? defaults.title.fontSize) * fontScale,
                 fontWeight: style?.fontWeight ?? defaults.title.fontWeight,
                 fontFamily: style?.fontFamily ??
                     defaults.title.fontFamily ??
@@ -91,7 +91,7 @@ export class DonutCenterContent {
             const style = this.config.subtitleStyle;
             elements.push({
                 text: this.subtitle,
-                fontSize: style?.fontSize ?? defaults.subtitle.fontSize,
+                fontSize: (style?.fontSize ?? defaults.subtitle.fontSize) * fontScale,
                 fontWeight: style?.fontWeight ?? defaults.subtitle.fontWeight,
                 fontFamily: style?.fontFamily ??
                     defaults.subtitle.fontFamily ??
@@ -99,9 +99,10 @@ export class DonutCenterContent {
                 color: style?.color ?? defaults.subtitle.color,
             });
         }
-        if (elements.length === 0)
+        if (elements.length === 0) {
             return;
-        const lineSpacing = 6;
+        }
+        const lineSpacing = Math.max(2, 6 * fontScale);
         const totalHeight = elements.reduce((sum, el, i) => sum + el.fontSize + (i < elements.length - 1 ? lineSpacing : 0), 0);
         const group = svg.append('g').attr('class', 'donut-center-content');
         let currentY = cy - totalHeight / 2;

package/donut-chart.d.ts

@@ -28,6 +28,7 @@ export declare class DonutChart extends BaseChart {
     protected getLayoutComponents(): LayoutAwareComponent[];
     protected createExportChart(): BaseChart;
     protected renderChart(): void;
+    private resolveFontScale;
     private positionTooltip;
     private buildTooltipContent;
     private renderSegments;

package/donut-chart.js

@@ -157,12 +157,13 @@ export class DonutChart extends BaseChart {
         const cy = this.plotArea.top + this.plotArea.height / 2;
         const outerRadius = Math.min(this.plotArea.width, this.plotArea.height) / 2;
         const innerRadius = outerRadius * this.innerRadiusRatio;
+        const fontScale = this.resolveFontScale(outerRadius);
         if (this.tooltip) {
             this.tooltip.initialize(this.theme);
         }
         this.renderSegments(visibleSegments, cx, cy, innerRadius, outerRadius);
         if (this.centerContent) {
-            this.centerContent.render(this.svg, cx, cy, this.theme);
+            this.centerContent.render(this.svg, cx, cy, this.theme, fontScale);
         }
         if (this.legend) {
             const pos = this.layoutManager.getComponentPosition(this.legend);
@@ -173,6 +174,12 @@ export class DonutChart extends BaseChart {
             this.legend.render(this.svg, legendSeries, this.theme, this.width, pos.x, pos.y);
         }
     }
+    resolveFontScale(outerRadius) {
+        const plotHeight = Math.max(1, this.theme.height - this.theme.margins.top - this.theme.margins.bottom);
+        const referenceRadius = Math.max(1, plotHeight / 2);
+        const rawScale = outerRadius / referenceRadius;
+        return Math.max(0.5, Math.min(1, rawScale));
+    }
     positionTooltip(event, tooltipDiv) {
         const node = tooltipDiv.node();
         if (!node)
@@ -224,7 +231,7 @@ export class DonutChart extends BaseChart {
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
-        const tooltipDiv = this.tooltip
+        const resolveTooltipDiv = () => this.tooltip
             ? select(`#${this.tooltip.id}`)
             : null;
         segmentGroup
@@ -245,6 +252,7 @@ export class DonutChart extends BaseChart {
                 .selectAll('.donut-segment')
                 .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
                 .style('opacity', 0.5);
+            const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
                 tooltipDiv
                     .style('visibility', 'visible')
@@ -253,6 +261,7 @@ export class DonutChart extends BaseChart {
             }
         })
             .on('mousemove', (event) => {
+            const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
                 this.positionTooltip(event, tooltipDiv);
             }
@@ -263,6 +272,7 @@ export class DonutChart extends BaseChart {
                 .duration(ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
             segmentGroup.selectAll('.donut-segment').style('opacity', 1);
+            const tooltipDiv = resolveTooltipDiv();
             if (tooltipDiv && !tooltipDiv.empty()) {
                 tooltipDiv.style('visibility', 'hidden');
             }