@internetstiftelsen/charts 0.13.3 → 0.14.1

package/dist/donut-chart.js

@@ -2,8 +2,9 @@ import { arc, pie, select } from 'd3';
 import { sanitizeForCSS } from './utils.js';
 import { ChartValidator } from './validation.js';
 import { RadialChartBase } from './radial-chart-base.js';
+import { buildRadialAnimatedArcData, buildRadialExitTargetPieData, createTransitionCompletionPromise, interpolateRadialArcDatum, interpolateRadialArcShape, normalizeRadialAnimationConfig, renderRadialArcDatum, RadialMotionController, } from './radial-animation.js';
 const HOVER_EXPAND_PX = 8;
-const ANIMATION_DURATION_MS = 150;
+const HOVER_ANIMATION_DURATION_MS = 150;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
 const DEFAULT_DONUT_VALUE_LABEL = {
@@ -11,9 +12,9 @@ const DEFAULT_DONUT_VALUE_LABEL = {
     position: 'auto',
     outsideOffset: 16,
     minVerticalSpacing: 14,
-    formatter: (label, value, _data, _percentage) => {
-        return `${label}: ${value}`;
-    },
+    oversizedBehavior: 'truncate',
+    forceVisible: false,
+    separator: ': ',
 };
 export class DonutChart extends RadialChartBase {
     constructor(config) {
@@ -54,6 +55,12 @@ export class DonutChart extends RadialChartBase {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "motionController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "segments", {
             enumerable: true,
             configurable: true,
@@ -87,6 +94,7 @@ export class DonutChart extends RadialChartBase {
         this.valueKey = resolvedConfig.valueKey;
         this.labelKey = resolvedConfig.labelKey;
         this.valueLabel = valueLabel;
+        this.motionController = new RadialMotionController(normalizeRadialAnimationConfig(config.animate, 'DonutChart'));
         this.initializeDataState();
     }
     validateDonutData() {
@@ -142,8 +150,12 @@ export class DonutChart extends RadialChartBase {
         ];
     }
     update(data) {
+        this.motionController.prepareForUpdate();
         super.update(data);
     }
+    prepareForLegendChange() {
+        this.motionController.prepareForUpdate();
+    }
     createExportChart() {
         return new DonutChart({
             data: this.data,
@@ -157,6 +169,7 @@ export class DonutChart extends RadialChartBase {
                 cornerRadius: this.cornerRadius,
             },
             valueLabel: this.valueLabel,
+            animate: false,
             valueKey: this.valueKey,
             labelKey: this.labelKey,
         });
@@ -184,9 +197,10 @@ export class DonutChart extends RadialChartBase {
     renderChart({ svg, plotGroup, plotArea, }) {
         this.renderTitle(svg);
         const visibleSegments = this.getVisibleRadialItems(this.segments);
+        const animationContext = this.motionController.getAnimationContext();
         const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
         this.initializeTooltip();
-        const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
+        const { segmentGroup, pieData, transitions } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius, animationContext, this.segments);
         if (this.valueLabel.show && visibleSegments.length > 0) {
             this.renderLabels(segmentGroup, pieData, outerRadius, visibleSegments.reduce((sum, segment) => {
                 return sum + segment.value;
@@ -195,6 +209,7 @@ export class DonutChart extends RadialChartBase {
         if (this.centerContent) {
             this.centerContent.render(svg, cx, cy, this.renderTheme, fontScale);
         }
+        this.setReadyPromise(this.motionController.completeRender(pieData, transitions));
         this.renderInlineLegend(svg);
     }
     getLegendSeries() {
@@ -214,10 +229,32 @@ 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);
+    resolveValueLabelText(segment, total) {
+        const percentage = this.getValueLabelPercentage(segment, total);
+        if (this.valueLabel.formatter) {
+            const fullText = this.valueLabel.formatter(segment.label, segment.value, segment.source, percentage);
+            return {
+                label: fullText,
+                value: '',
+                separator: '',
+                fullText,
+                isCustom: true,
+            };
+        }
+        const label = this.valueLabel.labelFormatter?.(segment.label, segment.value, segment.source, percentage) ?? segment.label;
+        const value = this.valueLabel.valueFormatter?.(segment.label, segment.value, segment.source, percentage) ?? String(segment.value);
+        return {
+            label,
+            value,
+            separator: this.valueLabel.separator,
+            fullText: `${label}${this.valueLabel.separator}${value}`,
+            isCustom: false,
+        };
     }
-    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
+    getValueLabelPercentage(segment, total) {
+        return total > 0 ? (segment.value / total) * 100 : 0;
+    }
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius, animationContext, allSegments) {
         const pieGenerator = pie()
             .value((d) => d.value)
             .padAngle(this.padAngle)
@@ -231,26 +268,64 @@ export class DonutChart extends RadialChartBase {
             .outerRadius(outerRadius + HOVER_EXPAND_PX)
             .cornerRadius(this.cornerRadius);
         const pieData = pieGenerator(segments);
+        const exitTargetPieData = buildRadialExitTargetPieData(pieGenerator, segments, allSegments, animationContext, pieData);
+        const arcShape = {
+            innerRadius,
+            outerRadius,
+            cornerRadius: this.cornerRadius,
+        };
         const segmentGroup = plotGroup
             .append('g')
             .attr('class', 'donut-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
-        segmentGroup
+        const animatedArcData = buildRadialAnimatedArcData(pieData, allSegments, animationContext, arcShape, exitTargetPieData);
+        const animationByDatum = new Map(animatedArcData.map((entry) => [entry.datum, entry]));
+        const getAnimation = (datum) => {
+            return animationByDatum.get(datum);
+        };
+        const renderedArcData = animatedArcData.map((entry) => entry.datum);
+        const transitions = [];
+        const segmentSelection = segmentGroup
             .selectAll('.donut-segment')
-            .data(pieData)
+            .data(renderedArcData, (d) => getAnimation(d).key)
             .join('path')
             .attr('class', (d) => `donut-segment segment-${sanitizeForCSS(d.data.label)}`)
-            .attr('d', arcGenerator)
+            .attr('d', (d) => {
+            const animation = getAnimation(d);
+            return renderRadialArcDatum(animation.startDatum, animation.startShape);
+        })
             .attr('fill', (d) => d.data.color)
-            .style('cursor', 'pointer')
-            .style('transition', 'opacity 0.15s ease')
+            .attr('opacity', (d) => getAnimation(d).initialOpacity)
+            .attr('aria-hidden', (d) => getAnimation(d).interactive ? null : 'true')
+            .style('cursor', (d) => getAnimation(d).interactive ? 'pointer' : 'default')
+            .style('pointer-events', (d) => getAnimation(d).interactive ? 'all' : 'none')
+            .style('transition', 'opacity 0.15s ease');
+        if (animationContext) {
+            const transition = segmentSelection
+                .transition()
+                .duration(animationContext.duration)
+                .ease(animationContext.easing)
+                .attrTween('d', (d) => {
+                const animation = getAnimation(d);
+                const datumInterpolator = interpolateRadialArcDatum(animation.startDatum, animation.endDatum);
+                const shapeInterpolator = interpolateRadialArcShape(animation.startShape, animation.endShape);
+                return (progress) => {
+                    return renderRadialArcDatum(datumInterpolator(progress), shapeInterpolator(progress));
+                };
+            })
+                .attr('opacity', (d) => getAnimation(d).finalOpacity);
+            transitions.push(createTransitionCompletionPromise(transition));
+        }
+        const interactiveSegmentSelection = segmentSelection.filter((d) => {
+            return getAnimation(d).interactive;
+        });
+        interactiveSegmentSelection
             .on('mouseenter', (event, d) => {
             select(event.currentTarget)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', hoverArcGenerator(d));
-            segmentGroup
-                .selectAll('.donut-segment')
+            interactiveSegmentSelection
                 .filter((_, i, nodes) => nodes[i] !== event.currentTarget)
                 .style('opacity', 0.5);
             this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
@@ -261,14 +336,15 @@ export class DonutChart extends RadialChartBase {
             .on('mouseleave', (event, d) => {
             select(event.currentTarget)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
-            segmentGroup.selectAll('.donut-segment').style('opacity', 1);
+            interactiveSegmentSelection.style('opacity', 1);
             this.hideTooltip();
         });
         return {
             segmentGroup,
             pieData,
+            transitions,
         };
     }
     renderLabels(segmentGroup, pieData, outerRadius, total, fontScale) {
@@ -281,7 +357,19 @@ export class DonutChart extends RadialChartBase {
         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 labelOverflowOptions = {
+            maxLabelWidth: this.valueLabel.maxLabelWidth,
+            oversizedBehavior: this.valueLabel.oversizedBehavior,
+            forceVisible: this.valueLabel.forceVisible,
+            fontSize,
+            fontFamily,
+            fontWeight,
+        };
+        const outsideLabels = pieData.map((datum) => {
+            const valueLabel = this.resolveValueLabelText(datum.data, total);
+            const dimensions = this.measureValueLabelDimensions(valueLabel, labelOverflowOptions);
+            return this.resolveOutsideLabel(datum, outerRadius, valueLabel, dimensions.height);
+        });
         const adjustedOutsideLabels = this.adjustOutsideLabelPositions(outsideLabels, outerRadius);
         const linesGroup = labelGroup
             .append('g')
@@ -306,7 +394,7 @@ export class DonutChart extends RadialChartBase {
                 .attr('fill', 'none')
                 .attr('stroke', this.renderTheme.valueLabel.border)
                 .attr('stroke-width', 1);
-            labelGroup
+            const textElement = labelGroup
                 .append('text')
                 .attr('class', `donut-label donut-label--outside donut-label-${sanitizeForCSS(outsideLabel.datum.data.label)}`)
                 .attr('x', textX)
@@ -316,8 +404,12 @@ export class DonutChart extends RadialChartBase {
                 .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));
+                .attr('fill', this.renderTheme.valueLabel.color);
+            if (outsideLabel.valueLabel.isCustom) {
+                this.renderRadialLabelText(textElement, outsideLabel.valueLabel.fullText, labelOverflowOptions);
+                return;
+            }
+            this.renderRadialStructuredLabelText(textElement, outsideLabel.valueLabel.label, outsideLabel.valueLabel.value, outsideLabel.valueLabel.separator, labelOverflowOptions);
         });
     }
     getArcPoint(angle, radius) {
@@ -326,7 +418,7 @@ export class DonutChart extends RadialChartBase {
             y: -Math.cos(angle) * radius,
         };
     }
-    resolveOutsideLabel(datum, outerRadius) {
+    resolveOutsideLabel(datum, outerRadius, valueLabel, height) {
         const midAngle = (datum.startAngle + datum.endAngle) / 2;
         const point = this.getArcPoint(midAngle, outerRadius + this.valueLabel.outsideOffset);
         const side = point.x >= 0 ? 'right' : 'left';
@@ -335,8 +427,16 @@ export class DonutChart extends RadialChartBase {
             y: point.y,
             side,
             textAnchor: side === 'right' ? 'start' : 'end',
+            valueLabel,
+            height,
         };
     }
+    measureValueLabelDimensions(valueLabel, labelOverflowOptions) {
+        if (valueLabel.isCustom) {
+            return this.measureRadialLabelDimensions(valueLabel.fullText, labelOverflowOptions);
+        }
+        return this.measureRadialStructuredLabelDimensions(valueLabel.label, valueLabel.value, valueLabel.separator, labelOverflowOptions);
+    }
     adjustOutsideLabelPositions(labels, outerRadius) {
         const adjustForSide = (side) => {
             const sideLabels = labels
@@ -349,7 +449,8 @@ export class DonutChart extends RadialChartBase {
             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;
+                const minY = sideLabels[i - 1].y +
+                    this.getOutsideLabelSpacing(sideLabels[i - 1], sideLabels[i]);
                 sideLabels[i].y = Math.max(sideLabels[i].y, minY);
             }
             const overflow = sideLabels[sideLabels.length - 1].y - bottomLimit;
@@ -357,7 +458,7 @@ export class DonutChart extends RadialChartBase {
                 sideLabels[sideLabels.length - 1].y -= overflow;
                 for (let i = sideLabels.length - 2; i >= 0; i--) {
                     const maxY = sideLabels[i + 1].y -
-                        this.valueLabel.minVerticalSpacing;
+                        this.getOutsideLabelSpacing(sideLabels[i], sideLabels[i + 1]);
                     sideLabels[i].y = Math.min(sideLabels[i].y, maxY);
                 }
                 const underflow = topLimit - sideLabels[0].y;
@@ -371,4 +472,7 @@ export class DonutChart extends RadialChartBase {
         };
         return [...adjustForSide('left'), ...adjustForSide('right')];
     }
+    getOutsideLabelSpacing(previousLabel, currentLabel) {
+        return Math.max(this.valueLabel.minVerticalSpacing, (previousLabel.height + currentLabel.height) / 2);
+    }
 }

package/dist/easing.d.ts

@@ -0,0 +1 @@
+export declare function createCubicBezierEasing(x1: number, y1: number, x2: number, y2: number): (progress: number) => number;

package/dist/easing.js

@@ -0,0 +1,30 @@
+const CUBIC_BEZIER_SAMPLE_STEPS = 24;
+export function createCubicBezierEasing(x1, y1, x2, y2) {
+    return (progress) => {
+        if (progress <= 0) {
+            return 0;
+        }
+        if (progress >= 1) {
+            return 1;
+        }
+        let lower = 0;
+        let upper = 1;
+        let parameter = progress;
+        for (let step = 0; step < CUBIC_BEZIER_SAMPLE_STEPS; step += 1) {
+            parameter = (lower + upper) / 2;
+            if (sampleCubicBezier(parameter, x1, x2) < progress) {
+                lower = parameter;
+            }
+            else {
+                upper = parameter;
+            }
+        }
+        return sampleCubicBezier(parameter, y1, y2);
+    };
+}
+function sampleCubicBezier(parameter, controlPoint1, controlPoint2) {
+    const inverseParameter = 1 - parameter;
+    return (3 * inverseParameter * inverseParameter * parameter * controlPoint1 +
+        3 * inverseParameter * parameter * parameter * controlPoint2 +
+        parameter * parameter * parameter);
+}

package/dist/gauge-chart.d.ts

@@ -1,4 +1,4 @@
-import type { DataItem, LegendSeries } from './types.js';
+import type { DataItem, LabelOversizedBehavior, LegendSeries } from './types.js';
 import type { BaseChart, BaseChartConfig, BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
 import { RadialChartBase } from './radial-chart-base.js';
@@ -35,8 +35,11 @@ export type GaugeLabelStyle = {
     fontFamily?: string;
     fontWeight?: number | string;
     color?: string;
+    maxLabelWidth?: number;
+    oversizedBehavior?: LabelOversizedBehavior;
+    forceVisible?: boolean;
 };
-export type GaugeAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out';
+export type GaugeAnimationEasingPreset = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'bounce-out' | 'elastic-out' | 'spring-out';
 export type GaugeAnimationConfig = {
     show?: boolean;
     duration?: number;
@@ -116,6 +119,7 @@ export declare class GaugeChart extends RadialChartBase {
     private interpolateLinearEasing;
     private normalizeTickLabelStyle;
     private normalizeValueLabelStyle;
+    private normalizeGaugeLabelStyle;
     private validateGaugeConfig;
     private validateGaugeRange;
     private validateGaugeGeometry;
@@ -164,6 +168,7 @@ export declare class GaugeChart extends RadialChartBase {
     private renderNeedle;
     private renderCurrentValueMarker;
     private renderValueText;
+    private renderGaugeLabelText;
     private attachTooltipLayer;
     private buildTooltipContent;
     protected getLegendSeries(): LegendSeries[];

package/dist/gauge-chart.js

@@ -1,4 +1,5 @@
 import { arc, easeBounceOut, easeCubicIn, easeCubicInOut, easeCubicOut, easeElasticOut, easeLinear, interpolateNumber, } from 'd3';
+import { createCubicBezierEasing } from './easing.js';
 import { DEFAULT_COLOR_PALETTE } from './theme.js';
 import { ChartValidator } from './validation.js';
 import { RadialChartBase } from './radial-chart-base.js';
@@ -37,6 +38,7 @@ const DEFAULT_TICK_LABEL_OFFSET = 12;
 const DEFAULT_TICK_LABEL_FONT_SIZE = 11;
 const DEFAULT_TICK_LABEL_FONT_WEIGHT = 'normal';
 const DEFAULT_TICK_LABEL_COLOR = '#4b5563';
+const DEFAULT_LABEL_OVERSIZED_BEHAVIOR = 'truncate';
 const DEFAULT_VALUE_LABEL_FONT_SIZE = 28;
 const DEFAULT_VALUE_LABEL_FONT_WEIGHT = '700';
 const DEFAULT_VALUE_LABEL_COLOR = '#111827';
@@ -49,6 +51,7 @@ const DEFAULT_PROGRESS_RADIUS_INSET = 2;
 const MIN_PROGRESS_BAND_THICKNESS = 1;
 const DEFAULT_HALF_CIRCLE_VALUE_TEXT_Y = 32;
 const DEFAULT_FULL_CIRCLE_VALUE_TEXT_MIN_Y = 22;
+const easeSpringOut = createCubicBezierEasing(0.85, 0, 0.15, 1);
 const GAUGE_ANIMATION_EASING_PRESETS = {
     linear: easeLinear,
     'ease-in': easeCubicIn,
@@ -56,6 +59,7 @@ const GAUGE_ANIMATION_EASING_PRESETS = {
     'ease-in-out': easeCubicInOut,
     'bounce-out': easeBounceOut,
     'elastic-out': easeElasticOut,
+    'spring-out': easeSpringOut,
 };
 const DUMMY_ARC_DATUM = {
     innerRadius: 0,
@@ -537,21 +541,31 @@ export class GaugeChart extends RadialChartBase {
         return lastPoint.value;
     }
     normalizeTickLabelStyle(config) {
-        return {
-            fontSize: config?.fontSize ?? DEFAULT_TICK_LABEL_FONT_SIZE,
-            fontFamily: config?.fontFamily ?? this.theme.axis.fontFamily,
-            fontWeight: config?.fontWeight ??
-                this.theme.axis.fontWeight ??
-                DEFAULT_TICK_LABEL_FONT_WEIGHT,
-            color: config?.color ?? DEFAULT_TICK_LABEL_COLOR,
-        };
+        return this.normalizeGaugeLabelStyle(config, {
+            fontSize: DEFAULT_TICK_LABEL_FONT_SIZE,
+            fontFamily: this.theme.axis.fontFamily,
+            fontWeight: this.theme.axis.fontWeight ?? DEFAULT_TICK_LABEL_FONT_WEIGHT,
+            color: DEFAULT_TICK_LABEL_COLOR,
+        });
     }
     normalizeValueLabelStyle(config) {
+        return this.normalizeGaugeLabelStyle(config, {
+            fontSize: DEFAULT_VALUE_LABEL_FONT_SIZE,
+            fontFamily: this.theme.axis.fontFamily,
+            fontWeight: DEFAULT_VALUE_LABEL_FONT_WEIGHT,
+            color: DEFAULT_VALUE_LABEL_COLOR,
+        });
+    }
+    normalizeGaugeLabelStyle(config, defaults) {
+        const resolvedConfig = config ?? {};
         return {
-            fontSize: config?.fontSize ?? DEFAULT_VALUE_LABEL_FONT_SIZE,
-            fontFamily: config?.fontFamily ?? this.theme.axis.fontFamily,
-            fontWeight: config?.fontWeight ?? DEFAULT_VALUE_LABEL_FONT_WEIGHT,
-            color: config?.color ?? DEFAULT_VALUE_LABEL_COLOR,
+            fontSize: resolveDefault(resolvedConfig.fontSize, defaults.fontSize),
+            fontFamily: resolveDefault(resolvedConfig.fontFamily, defaults.fontFamily),
+            fontWeight: resolveDefault(resolvedConfig.fontWeight, defaults.fontWeight),
+            color: resolveDefault(resolvedConfig.color, defaults.color),
+            maxLabelWidth: resolvedConfig.maxLabelWidth,
+            oversizedBehavior: resolveDefault(resolvedConfig.oversizedBehavior, DEFAULT_LABEL_OVERSIZED_BEHAVIOR),
+            forceVisible: resolvedConfig.forceVisible ?? false,
         };
     }
     validateGaugeConfig() {
@@ -1107,7 +1121,8 @@ export class GaugeChart extends RadialChartBase {
                 : labelPoint.x > 0
                     ? 'start'
                     : 'end';
-            tickGroup
+            const tickLabelText = this.ticks.formatter(value);
+            const textElement = tickGroup
                 .append('text')
                 .attr('class', 'gauge-tick-label')
                 .attr('x', labelPoint.x)
@@ -1117,8 +1132,8 @@ export class GaugeChart extends RadialChartBase {
                 .attr('font-size', this.tickLabelStyle.fontSize)
                 .attr('font-family', this.tickLabelStyle.fontFamily)
                 .attr('font-weight', this.tickLabelStyle.fontWeight)
-                .attr('fill', this.tickLabelStyle.color)
-                .text(this.ticks.formatter(value));
+                .attr('fill', this.tickLabelStyle.color);
+            this.renderGaugeLabelText(textElement, tickLabelText, this.tickLabelStyle);
         }
     }
     renderTargetMarker(gaugeGroup, innerRadius, outerRadius) {
@@ -1243,8 +1258,8 @@ export class GaugeChart extends RadialChartBase {
             .attr('font-size', this.valueLabelStyle.fontSize)
             .attr('font-weight', this.valueLabelStyle.fontWeight)
             .attr('font-family', this.valueLabelStyle.fontFamily)
-            .attr('fill', this.valueLabelStyle.color)
-            .text(this.valueFormatter(initialValue));
+            .attr('fill', this.valueLabelStyle.color);
+        this.renderGaugeLabelText(valueText, this.valueFormatter(initialValue), this.valueLabelStyle, 'baseline');
         if (shouldAnimate) {
             valueText
                 .transition()
@@ -1253,11 +1268,21 @@ export class GaugeChart extends RadialChartBase {
                 .tween('text', () => {
                 return (progress) => {
                     const currentValue = startValue + (this.value - startValue) * progress;
-                    valueText.text(this.valueFormatter(currentValue));
+                    this.renderGaugeLabelText(valueText, this.valueFormatter(currentValue), this.valueLabelStyle, 'baseline');
                 };
             });
         }
     }
+    renderGaugeLabelText(textElement, text, labelStyle, verticalAnchor = 'middle') {
+        this.renderRadialLabelText(textElement, text, {
+            maxLabelWidth: labelStyle.maxLabelWidth,
+            oversizedBehavior: labelStyle.oversizedBehavior,
+            forceVisible: labelStyle.forceVisible,
+            fontSize: labelStyle.fontSize,
+            fontFamily: labelStyle.fontFamily,
+            fontWeight: labelStyle.fontWeight,
+        }, verticalAnchor);
+    }
     attachTooltipLayer(gaugeGroup, innerRadius, outerRadius, progressColor) {
         const interactionArc = arc()
             .innerRadius(Math.max(0, innerRadius - 20))

package/dist/line.js

@@ -267,6 +267,7 @@ export class Line {
         const border = config.border ?? theme.valueLabel.border;
         const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
         const padding = config.padding ?? theme.valueLabel.padding;
+        const forceVisible = config.forceVisible === true;
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `line-value-labels-${sanitizeForCSS(this.dataKey)}`);
@@ -299,7 +300,7 @@ export class Line {
                 labelY = yPos + boxHeight / 2 + theme.line.point.size + 4;
                 // Check if it fits below
                 if (labelY + boxHeight / 2 > plotBottom - 4) {
-                    shouldRender = false;
+                    shouldRender = forceVisible;
                 }
             }
             tempText.remove();

package/dist/pie-chart.d.ts

@@ -1,7 +1,10 @@
-import type { DataItem, LegendSeries } from './types.js';
+import type { DataItem, LabelOversizedBehavior, LegendSeries } from './types.js';
 import { type BaseChartConfig, type BaseRenderContext } from './base-chart.js';
 import type { ChartComponentBase } from './chart-interface.js';
 import { RadialChartBase } from './radial-chart-base.js';
+import { type RadialAnimationConfig, type RadialAnimationEasingPreset } from './radial-animation.js';
+export type PieAnimationConfig = RadialAnimationConfig;
+export type PieAnimationEasingPreset = RadialAnimationEasingPreset;
 export type PieSort = 'none' | 'ascending' | 'descending' | ((a: PieSegmentData, b: PieSegmentData) => number);
 export type PieConfig = {
     innerRadius?: number;
@@ -12,6 +15,7 @@ export type PieConfig = {
     sort?: PieSort;
 };
 export type PieValueLabelPosition = 'inside' | 'outside' | 'auto';
+export type PieValueLabelFormatter = (label: string, value: number, data: DataItem, percentage: number) => string;
 export type PieValueLabelConfig = {
     show?: boolean;
     position?: PieValueLabelPosition;
@@ -19,11 +23,18 @@ export type PieValueLabelConfig = {
     outsideOffset?: number;
     insideMargin?: number;
     minVerticalSpacing?: number;
-    formatter?: (label: string, value: number, data: DataItem, percentage: number) => string;
+    maxLabelWidth?: number;
+    oversizedBehavior?: LabelOversizedBehavior;
+    forceVisible?: boolean;
+    labelFormatter?: PieValueLabelFormatter;
+    valueFormatter?: PieValueLabelFormatter;
+    separator?: string;
+    formatter?: PieValueLabelFormatter;
 };
 export type PieChartConfig = BaseChartConfig & {
     pie?: PieConfig;
     valueLabel?: PieValueLabelConfig;
+    animate?: boolean | PieAnimationConfig;
     valueKey?: string;
     labelKey?: string;
 };
@@ -43,6 +54,7 @@ export declare class PieChart extends RadialChartBase {
     private readonly valueKey;
     private readonly labelKey;
     private readonly valueLabel;
+    private readonly motionController;
     private segments;
     constructor(config: PieChartConfig);
     private validatePieData;
@@ -53,7 +65,9 @@ export declare class PieChart extends RadialChartBase {
     private warnOnTinySlices;
     protected getExportComponents(): ChartComponentBase[];
     update(data: DataItem[]): void;
-    private formatValueLabelText;
+    protected prepareForLegendChange(): void;
+    private resolveValueLabelText;
+    private getValueLabelPercentage;
     protected createExportChart(): RadialChartBase;
     protected syncDerivedState(): void;
     protected renderChart({ svg, plotGroup, plotArea, }: BaseRenderContext): void;
@@ -69,6 +83,8 @@ export declare class PieChart extends RadialChartBase {
     private resolveValueLabelPlacement;
     private canFitInsideLabel;
     private resolveOutsideLabel;
+    private measureValueLabelDimensions;
     private adjustOutsideLabelPositions;
+    private getOutsideLabelSpacing;
 }
 export {};