@internetstiftelsen/charts 0.13.2 → 0.14.0

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 {};

package/dist/pie-chart.js

@@ -1,9 +1,10 @@
 import { arc, pie, select } from 'd3';
 import { ChartValidator } from './validation.js';
-import { getContrastTextColor, measureTextWidth, sanitizeForCSS, } from './utils.js';
+import { getContrastTextColor, sanitizeForCSS } from './utils.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 FULL_CIRCLE_RADIANS = Math.PI * 2;
 const OUTSIDE_LABEL_TEXT_OFFSET_PX = 10;
 const OUTSIDE_LABEL_LINE_INSET_PX = 4;
@@ -15,9 +16,9 @@ const DEFAULT_PIE_VALUE_LABEL = {
     outsideOffset: 16,
     insideMargin: 8,
     minVerticalSpacing: 14,
-    formatter: (label, value, _data, _percentage) => {
-        return `${label}: ${value}`;
-    },
+    oversizedBehavior: 'truncate',
+    forceVisible: false,
+    separator: ': ',
 };
 export class PieChart extends RadialChartBase {
     constructor(config) {
@@ -76,6 +77,12 @@ export class PieChart 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,
@@ -108,6 +115,7 @@ export class PieChart extends RadialChartBase {
             ...DEFAULT_PIE_VALUE_LABEL,
             ...config.valueLabel,
         };
+        this.motionController = new RadialMotionController(normalizeRadialAnimationConfig(config.animate, 'PieChart'));
         this.initializeDataState();
     }
     validatePieData() {
@@ -203,10 +211,36 @@ export class PieChart extends RadialChartBase {
         });
     }
     update(data) {
+        this.motionController.prepareForUpdate();
         super.update(data);
     }
-    formatValueLabelText(segment, total) {
-        return this.valueLabel.formatter(segment.label, segment.value, segment.source, total > 0 ? (segment.value / total) * 100 : 0);
+    prepareForLegendChange() {
+        this.motionController.prepareForUpdate();
+    }
+    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,
+        };
+    }
+    getValueLabelPercentage(segment, total) {
+        return total > 0 ? (segment.value / total) * 100 : 0;
     }
     createExportChart() {
         return new PieChart({
@@ -224,6 +258,7 @@ export class PieChart extends RadialChartBase {
                 sort: this.sort,
             },
             valueLabel: this.valueLabel,
+            animate: false,
             valueKey: this.valueKey,
             labelKey: this.labelKey,
         });
@@ -235,16 +270,16 @@ export class PieChart 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();
-        if (visibleSegments.length > 0) {
-            const { cx, cy, outerRadius, innerRadius, fontScale } = this.getRadialLayout(plotArea, this.innerRadiusRatio);
-            const { segmentGroup, pieData } = this.renderSegments(plotGroup, visibleSegments, cx, cy, innerRadius, outerRadius);
-            if (this.valueLabel.show) {
-                this.renderLabels(segmentGroup, pieData, innerRadius, outerRadius, visibleSegments.reduce((sum, segment) => {
-                    return sum + segment.value;
-                }, 0), fontScale);
-            }
+        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, innerRadius, outerRadius, visibleSegments.reduce((sum, segment) => {
+                return sum + segment.value;
+            }, 0), fontScale);
         }
+        this.setReadyPromise(this.motionController.completeRender(pieData, transitions));
         this.renderInlineLegend(svg);
     }
     getLegendSeries() {
@@ -262,7 +297,7 @@ export class PieChart extends RadialChartBase {
         }
         return null;
     }
-    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius) {
+    renderSegments(plotGroup, segments, cx, cy, innerRadius, outerRadius, animationContext, allSegments) {
         const pieGenerator = pie()
             .value((d) => d.value)
             .startAngle(this.startAngle)
@@ -284,30 +319,72 @@ export class PieChart 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', 'pie-segments')
             .attr('transform', `translate(${cx}, ${cy})`);
         const total = segments.reduce((sum, segment) => sum + segment.value, 0);
+        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('.pie-segment')
-            .data(pieData)
+            .data(renderedArcData, (d) => getAnimation(d).key)
             .join('path')
             .attr('class', (d) => `pie-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)
-            .attr('tabindex', 0)
-            .attr('aria-label', (d) => this.buildAriaLabel(d, total))
-            .style('cursor', 'pointer')
+            .attr('opacity', (d) => getAnimation(d).initialOpacity)
+            .attr('tabindex', (d) => (getAnimation(d).interactive ? 0 : null))
+            .attr('aria-hidden', (d) => getAnimation(d).interactive ? null : 'true')
+            .attr('aria-label', (d) => {
+            return getAnimation(d).interactive
+                ? this.buildAriaLabel(d, total)
+                : null;
+        })
+            .style('cursor', (d) => getAnimation(d).interactive ? 'pointer' : 'default')
+            .style('pointer-events', (d) => getAnimation(d).interactive ? 'all' : 'none')
             .style('transition', 'opacity 0.15s ease');
-        segmentSelection
+        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) => {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', hoverArcGenerator(d));
-            segmentSelection
+            interactiveSegmentSelection
                 .filter((_, i, nodes) => nodes[i] !== target)
                 .style('opacity', 0.5);
             this.showTooltipFromPointer(event, this.buildTooltipContent(d, segments));
@@ -319,18 +396,18 @@ export class PieChart extends RadialChartBase {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
-            segmentSelection.style('opacity', 1);
+            interactiveSegmentSelection.style('opacity', 1);
             this.hideTooltip();
         })
             .on('focus', (event, d) => {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', hoverArcGenerator(d));
-            segmentSelection
+            interactiveSegmentSelection
                 .filter((_, i, nodes) => nodes[i] !== target)
                 .style('opacity', 0.5);
             this.showTooltipAtElement(target, this.buildTooltipContent(d, segments));
@@ -339,9 +416,9 @@ export class PieChart extends RadialChartBase {
             const target = event.currentTarget;
             select(target)
                 .transition()
-                .duration(ANIMATION_DURATION_MS)
+                .duration(HOVER_ANIMATION_DURATION_MS)
                 .attr('d', arcGenerator(d));
-            segmentSelection.style('opacity', 1);
+            interactiveSegmentSelection.style('opacity', 1);
             this.hideTooltip();
         })
             .on('keydown', (event) => {
@@ -350,6 +427,7 @@ export class PieChart extends RadialChartBase {
         return {
             segmentGroup,
             pieData,
+            transitions,
         };
     }
     handleSegmentKeyNavigation(event) {
@@ -415,30 +493,44 @@ export class PieChart extends RadialChartBase {
             .innerRadius(insideLabelRadius)
             .outerRadius(insideLabelRadius);
         const fontSize = this.renderTheme.legend.fontSize * fontScale;
+        const fontFamily = this.renderTheme.axis.fontFamily;
         const fontWeight = this.renderTheme.axis.fontWeight ?? 'normal';
+        const labelOverflowOptions = {
+            maxLabelWidth: this.valueLabel.maxLabelWidth,
+            oversizedBehavior: this.valueLabel.oversizedBehavior,
+            forceVisible: this.valueLabel.forceVisible,
+            fontSize,
+            fontFamily,
+            fontWeight,
+        };
         const outsideLabels = [];
         pieData.forEach((d) => {
             const percentage = total > 0 ? (d.data.value / total) * 100 : 0;
-            const labelText = this.formatValueLabelText(d.data, total);
-            const placement = this.resolveValueLabelPlacement(d, labelText, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
+            const valueLabel = this.resolveValueLabelText(d.data, total);
+            const labelDimensions = this.measureValueLabelDimensions(valueLabel, labelOverflowOptions);
+            const placement = this.resolveValueLabelPlacement(d, labelDimensions, percentage, innerRadius, outerRadius, insideLabelRadius);
             if (placement === 'inside') {
                 const [x, y] = insideArc.centroid(d);
-                labelGroup
+                const textElement = labelGroup
                     .append('text')
                     .attr('class', `pie-label pie-label--inside pie-label-${sanitizeForCSS(d.data.label)}`)
                     .attr('x', x)
                     .attr('y', y)
                     .attr('text-anchor', 'middle')
                     .attr('dominant-baseline', 'middle')
-                    .attr('font-family', this.renderTheme.axis.fontFamily)
+                    .attr('font-family', fontFamily)
                     .attr('font-size', `${fontSize}px`)
                     .attr('font-weight', fontWeight)
-                    .attr('fill', getContrastTextColor(d.data.color))
-                    .text(labelText);
+                    .attr('fill', getContrastTextColor(d.data.color));
+                if (valueLabel.isCustom) {
+                    this.renderRadialLabelText(textElement, valueLabel.fullText, labelOverflowOptions);
+                    return;
+                }
+                this.renderRadialStructuredLabelText(textElement, valueLabel.label, valueLabel.value, valueLabel.separator, labelOverflowOptions);
                 return;
             }
             if (placement === 'outside') {
-                outsideLabels.push(this.resolveOutsideLabel(d, outerRadius));
+                outsideLabels.push(this.resolveOutsideLabel(d, outerRadius, valueLabel, labelDimensions.height));
             }
         });
         if (outsideLabels.length === 0) {
@@ -468,24 +560,30 @@ export class PieChart extends RadialChartBase {
                 .attr('fill', 'none')
                 .attr('stroke', '#9ca3af')
                 .attr('stroke-width', 1);
-            labelGroup
+            const textElement = labelGroup
                 .append('text')
                 .attr('class', `pie-label pie-label--outside pie-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', this.renderTheme.axis.fontFamily)
+                .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);
         });
     }
-    resolveValueLabelPlacement(datum, labelText, percentage, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
-        const fitsInside = this.canFitInsideLabel(datum, labelText, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight);
+    resolveValueLabelPlacement(datum, labelDimensions, percentage, innerRadius, outerRadius, insideLabelRadius) {
+        const fitsInside = this.canFitInsideLabel(datum, labelDimensions, innerRadius, outerRadius, insideLabelRadius);
         if (this.valueLabel.position === 'inside') {
-            return fitsInside ? 'inside' : 'hidden';
+            return fitsInside || this.valueLabel.forceVisible
+                ? 'inside'
+                : 'hidden';
         }
         if (this.valueLabel.position === 'outside') {
             return 'outside';
@@ -498,23 +596,14 @@ export class PieChart extends RadialChartBase {
         }
         return 'inside';
     }
-    canFitInsideLabel(datum, labelText, innerRadius, outerRadius, insideLabelRadius, fontSize, fontWeight) {
-        if (!this.svg) {
-            return false;
-        }
-        const svgNode = this.svg.node();
-        if (!svgNode) {
-            return false;
-        }
-        const textWidth = measureTextWidth(labelText, fontSize, this.renderTheme.axis.fontFamily, fontWeight, svgNode);
+    canFitInsideLabel(datum, labelDimensions, innerRadius, outerRadius, insideLabelRadius) {
         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;
-        const verticalFitThreshold = fontSize * 1.15;
-        return (availableArcLength >= textWidth &&
-            availableRadialThickness >= verticalFitThreshold);
+        return (availableArcLength >= labelDimensions.width &&
+            availableRadialThickness >= labelDimensions.height);
     }
-    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';
@@ -523,8 +612,16 @@ export class PieChart 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
@@ -537,7 +634,8 @@ export class PieChart 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;
@@ -545,7 +643,7 @@ export class PieChart 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;
@@ -564,4 +662,7 @@ export class PieChart extends RadialChartBase {
         const leftLabels = adjustForSide('left');
         return [...rightLabels, ...leftLabels];
     }
+    getOutsideLabelSpacing(previousLabel, currentLabel) {
+        return Math.max(this.valueLabel.minVerticalSpacing, (previousLabel.height + currentLabel.height) / 2);
+    }
 }