@internetstiftelsen/charts 0.10.0 → 0.10.1

package/dist/bar.js

@@ -4,6 +4,7 @@ const LABEL_INSET_DEFAULT = 4;
 const LABEL_INSET_STACKED = 6;
 const LABEL_MIN_PADDING_DEFAULT = 8;
 const LABEL_MIN_PADDING_STACKED = 16;
+const LABEL_OUTSIDE_OFFSET = 4;
 function getLabelSpacing(mode) {
     const stacked = mode !== 'none';
     return {
@@ -48,34 +49,50 @@ function getBarSlotLayout(bandwidth, mode, maxBarSize, totalSeries, seriesIndex,
 function getBarValueRange(categoryKey, value, stackingContext) {
     const mode = stackingContext?.mode ?? 'normal';
     if (mode === 'none' || mode === 'layer') {
-        return {
-            start: 0,
-            end: value,
-        };
+        return getUnstackedBarValueRange(value);
     }
     if (mode === 'percent') {
-        if (value >= 0) {
-            const cumulative = stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0;
-            const total = stackingContext?.positiveTotalData.get(categoryKey) ?? 0;
-            if (total === 0) {
-                return { start: 0, end: 0 };
-            }
-            return {
-                start: (cumulative / total) * 100,
-                end: ((cumulative + value) / total) * 100,
-            };
-        }
-        const cumulativeMagnitude = stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0;
-        const totalMagnitude = stackingContext?.negativeTotalData.get(categoryKey) ?? 0;
-        if (totalMagnitude === 0) {
-            return { start: 0, end: 0 };
-        }
+        return getPercentBarValueRange(categoryKey, value, stackingContext);
+    }
+    return getStackedBarValueRange(categoryKey, value, stackingContext);
+}
+function getUnstackedBarValueRange(value) {
+    return {
+        start: 0,
+        end: value,
+    };
+}
+function getPercentBarValueRange(categoryKey, value, stackingContext) {
+    const isPositive = value >= 0;
+    const { cumulative, total } = getPercentBarRangeMetrics(categoryKey, isPositive, stackingContext);
+    if (total === 0) {
         return {
-            start: -((cumulativeMagnitude / totalMagnitude) * 100),
-            end: -(((cumulativeMagnitude + Math.abs(value)) / totalMagnitude) *
-                100),
+            start: 0,
+            end: 0,
         };
     }
+    const start = (cumulative / total) * 100;
+    const end = ((cumulative + Math.abs(value)) / total) * 100;
+    return isPositive ? { start, end } : { start: -start, end: -end };
+}
+function getPercentBarRangeMetrics(categoryKey, isPositive, stackingContext) {
+    return isPositive
+        ? getPositivePercentBarRangeMetrics(categoryKey, stackingContext)
+        : getNegativePercentBarRangeMetrics(categoryKey, stackingContext);
+}
+function getPositivePercentBarRangeMetrics(categoryKey, stackingContext) {
+    return {
+        cumulative: stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0,
+        total: stackingContext?.positiveTotalData.get(categoryKey) ?? 0,
+    };
+}
+function getNegativePercentBarRangeMetrics(categoryKey, stackingContext) {
+    return {
+        cumulative: stackingContext?.negativeCumulativeData.get(categoryKey) ?? 0,
+        total: stackingContext?.negativeTotalData.get(categoryKey) ?? 0,
+    };
+}
+function getStackedBarValueRange(categoryKey, value, stackingContext) {
     if (value >= 0) {
         const cumulative = stackingContext?.positiveCumulativeData.get(categoryKey) ?? 0;
         return {
@@ -262,256 +279,275 @@ export class Bar {
             .attr('height', barHeight)
             .attr('fill', (d, i) => this.colorAdapter ? this.colorAdapter(d, i) : this.fill);
     }
+    resolveValueLabelConfig(theme) {
+        const config = this.valueLabel;
+        return {
+            ...this.resolveValueLabelPlacement(config),
+            ...this.resolveValueLabelStyle(config, theme),
+            formatter: config.formatter,
+            autoContrastInside: config.color === undefined,
+        };
+    }
+    resolveValueLabelPlacement(config) {
+        return {
+            position: config.position ?? 'outside',
+            insidePosition: config.insidePosition ?? 'top',
+        };
+    }
+    resolveValueLabelStyle(config, theme) {
+        return {
+            fontSize: config.fontSize ?? theme.valueLabel.fontSize,
+            fontFamily: config.fontFamily ?? theme.valueLabel.fontFamily,
+            fontWeight: config.fontWeight ?? theme.valueLabel.fontWeight,
+            color: config.color ?? theme.valueLabel.color,
+            background: config.background ?? theme.valueLabel.background,
+            border: config.border ?? theme.valueLabel.border,
+            borderRadius: config.borderRadius ?? theme.valueLabel.borderRadius,
+            padding: config.padding ?? theme.valueLabel.padding,
+        };
+    }
+    getValueLabelText(rawValue, data, config) {
+        return config.formatter
+            ? config.formatter(this.dataKey, rawValue, data)
+            : String(rawValue);
+    }
+    getBarColor(data, index) {
+        return this.colorAdapter ? this.colorAdapter(data, index) : this.fill;
+    }
+    measureLabelBox(labelGroup, valueText, config) {
+        const tempText = labelGroup
+            .append('text')
+            .style('font-size', `${config.fontSize}px`)
+            .style('font-family', config.fontFamily)
+            .style('font-weight', config.fontWeight)
+            .text(valueText);
+        const textBox = tempText.node().getBBox();
+        tempText.remove();
+        return {
+            width: textBox.width + config.padding * 2,
+            height: textBox.height + config.padding * 2,
+        };
+    }
+    getLabelColor(config, barColor) {
+        if (config.position === 'inside' && config.autoContrastInside) {
+            return getContrastTextColor(barColor);
+        }
+        return config.color;
+    }
+    appendValueLabel(labelGroup, valueText, placement, labelBox, config, labelColor) {
+        const group = labelGroup.append('g');
+        if (config.position === 'outside') {
+            group
+                .append('rect')
+                .attr('x', placement.x - labelBox.width / 2)
+                .attr('y', placement.y - labelBox.height / 2)
+                .attr('width', labelBox.width)
+                .attr('height', labelBox.height)
+                .attr('rx', config.borderRadius)
+                .attr('ry', config.borderRadius)
+                .attr('fill', config.background)
+                .attr('stroke', config.border)
+                .attr('stroke-width', 1);
+        }
+        group
+            .append('text')
+            .attr('x', placement.x)
+            .attr('y', placement.y)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'central')
+            .style('font-size', `${config.fontSize}px`)
+            .style('font-family', config.fontFamily)
+            .style('font-weight', config.fontWeight)
+            .style('fill', labelColor)
+            .style('pointer-events', 'none')
+            .text(valueText);
+    }
+    getVerticalLabelPlacement(input) {
+        if (input.position === 'outside') {
+            return this.getVerticalOutsideLabelPlacement(input);
+        }
+        if (input.mode === 'layer' && input.insidePosition === 'bottom') {
+            return {
+                x: input.x,
+                y: (input.barTop + input.barBottom) / 2,
+                shouldRender: false,
+            };
+        }
+        const { inset, minPadding } = getLabelSpacing(input.mode);
+        const y = this.getVerticalInsideLabelY(input.barTop, input.barBottom, input.labelBox.height, input.insidePosition, inset);
+        return {
+            x: input.x,
+            y,
+            shouldRender: input.labelBox.height + minPadding <= input.barHeight,
+        };
+    }
+    getVerticalOutsideLabelPlacement(input) {
+        const y = input.isNegative
+            ? input.barBottom + input.labelBox.height / 2 + LABEL_OUTSIDE_OFFSET
+            : input.barTop - input.labelBox.height / 2 - LABEL_OUTSIDE_OFFSET;
+        const shouldRender = input.isNegative
+            ? y + input.labelBox.height / 2 <= input.plotBottom
+            : y - input.labelBox.height / 2 >= input.plotTop;
+        return {
+            x: input.x,
+            y,
+            shouldRender,
+        };
+    }
+    getVerticalInsideLabelY(barTop, barBottom, labelHeight, insidePosition, inset) {
+        switch (insidePosition) {
+            case 'top':
+                return barTop + labelHeight / 2 + inset;
+            case 'middle':
+                return (barTop + barBottom) / 2;
+            case 'bottom':
+                return barBottom - labelHeight / 2 - inset;
+        }
+    }
+    getHorizontalLabelPlacement(input) {
+        if (input.position === 'outside') {
+            return this.getHorizontalOutsideLabelPlacement(input);
+        }
+        if (input.mode === 'layer' && input.insidePosition === 'bottom') {
+            return {
+                x: (input.barLeft + input.barRight) / 2,
+                y: input.y,
+                shouldRender: false,
+            };
+        }
+        const { inset, minPadding } = getLabelSpacing(input.mode);
+        const x = this.getHorizontalInsideLabelX(input.barLeft, input.barRight, input.labelBox.width, input.isNegative, input.insidePosition, inset);
+        const fitsBar = input.labelBox.width + minPadding <= input.barWidth;
+        const withinBounds = input.insidePosition === 'middle' ||
+            this.isHorizontalLabelWithinBounds(x, input.labelBox.width, input.barLeft, input.barRight);
+        return {
+            x,
+            y: input.y,
+            shouldRender: fitsBar && withinBounds,
+        };
+    }
+    getHorizontalOutsideLabelPlacement(input) {
+        const x = input.isNegative
+            ? input.barLeft - input.labelBox.width / 2 - LABEL_OUTSIDE_OFFSET
+            : input.barRight + input.labelBox.width / 2 + LABEL_OUTSIDE_OFFSET;
+        const shouldRender = input.isNegative
+            ? x - input.labelBox.width / 2 >= input.plotLeft
+            : x + input.labelBox.width / 2 <= input.plotRight;
+        return {
+            x,
+            y: input.y,
+            shouldRender,
+        };
+    }
+    getHorizontalInsideLabelX(barLeft, barRight, labelWidth, isNegative, insidePosition, inset) {
+        switch (insidePosition) {
+            case 'top':
+                return isNegative
+                    ? barRight - labelWidth / 2 - inset
+                    : barLeft + labelWidth / 2 + inset;
+            case 'middle':
+                return (barLeft + barRight) / 2;
+            case 'bottom':
+                return isNegative
+                    ? barLeft + labelWidth / 2 + inset
+                    : barRight - labelWidth / 2 - inset;
+        }
+    }
+    isHorizontalLabelWithinBounds(labelX, labelWidth, barLeft, barRight) {
+        const labelLeft = labelX - labelWidth / 2;
+        const labelRight = labelX + labelWidth / 2;
+        return labelLeft >= barLeft + 1 && labelRight <= barRight - 1;
+    }
+    renderVerticalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, xScaleType, stackingContext, config, barWidth, barOffset, mode, plotTop, plotBottom) {
+        const categoryKey = String(dataItem[xKey]);
+        const rawValue = parseValue(dataItem[this.dataKey]);
+        const renderedValue = this.getRenderedValue(rawValue, 'vertical');
+        const valueText = this.getValueLabelText(rawValue, dataItem, config);
+        const xPos = getScalePosition(x, dataItem[xKey], xScaleType);
+        const barColor = this.getBarColor(dataItem, index);
+        const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
+        const bounds = getScaledValueRange(y, start, end);
+        const barTop = bounds.min;
+        const barBottom = bounds.max;
+        const barHeight = Math.abs(barBottom - barTop);
+        const barCenterX = xPos +
+            (xScaleType === 'band' ? barOffset : -barWidth / 2) +
+            barWidth / 2;
+        const labelBox = this.measureLabelBox(labelGroup, valueText, config);
+        const placement = this.getVerticalLabelPlacement({
+            x: barCenterX,
+            barTop,
+            barBottom,
+            barHeight,
+            labelBox,
+            isNegative: renderedValue < 0,
+            mode,
+            position: config.position,
+            insidePosition: config.insidePosition,
+            plotTop,
+            plotBottom,
+        });
+        if (!placement.shouldRender) {
+            return;
+        }
+        this.appendValueLabel(labelGroup, valueText, placement, labelBox, config, this.getLabelColor(config, barColor));
+    }
+    renderHorizontalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, yScaleType, stackingContext, config, barHeight, barOffset, mode, plotLeft, plotRight) {
+        const categoryKey = String(dataItem[xKey]);
+        const rawValue = parseValue(dataItem[this.dataKey]);
+        const renderedValue = this.getRenderedValue(rawValue, 'horizontal');
+        const valueText = this.getValueLabelText(rawValue, dataItem, config);
+        const yPos = getScalePosition(y, dataItem[xKey], yScaleType);
+        const barColor = this.getBarColor(dataItem, index);
+        const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
+        const bounds = getScaledValueRange(x, start, end);
+        const barLeft = bounds.min;
+        const barRight = bounds.max;
+        const barWidth = Math.abs(barRight - barLeft);
+        const barCenterY = yPos +
+            (yScaleType === 'band' ? barOffset : -barHeight / 2) +
+            barHeight / 2;
+        const labelBox = this.measureLabelBox(labelGroup, valueText, config);
+        const placement = this.getHorizontalLabelPlacement({
+            y: barCenterY,
+            barLeft,
+            barRight,
+            barWidth,
+            labelBox,
+            isNegative: renderedValue < 0,
+            mode,
+            position: config.position,
+            insidePosition: config.insidePosition,
+            plotLeft,
+            plotRight,
+        });
+        if (!placement.shouldRender) {
+            return;
+        }
+        this.appendValueLabel(labelGroup, valueText, placement, labelBox, config, this.getLabelColor(config, barColor));
+    }
     renderVerticalValueLabels(plotGroup, data, xKey, x, y, parseValue, xScaleType, theme, stackingContext) {
         const bandwidth = x.bandwidth ? x.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
         const { thickness: barWidth, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
-        const config = this.valueLabel;
-        const position = config.position || 'outside';
-        const insidePosition = config.insidePosition || 'top';
-        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
-        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
-        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const defaultLabelColor = config.color ?? theme.valueLabel.color;
-        const background = config.background ?? theme.valueLabel.background;
-        const border = config.border ?? theme.valueLabel.border;
-        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
-        const padding = config.padding ?? theme.valueLabel.padding;
+        const config = this.resolveValueLabelConfig(theme);
+        const plotTop = Math.min(...y.range());
+        const plotBottom = Math.max(...y.range());
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d, i) => {
-            const categoryKey = String(d[xKey]);
-            const rawValue = parseValue(d[this.dataKey]);
-            const renderedValue = this.getRenderedValue(rawValue, 'vertical');
-            const valueText = String(rawValue);
-            const xPos = getScalePosition(x, d[xKey], xScaleType);
-            const barColor = this.colorAdapter
-                ? this.colorAdapter(d, i)
-                : this.fill;
-            const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
-            const bounds = getScaledValueRange(y, start, end);
-            const barTop = bounds.min;
-            const barBottom = bounds.max;
-            const isNegative = renderedValue < 0;
-            const barHeight = Math.abs(barBottom - barTop);
-            const barCenterX = xPos +
-                (xScaleType === 'band' ? barOffset : -barWidth / 2) +
-                barWidth / 2;
-            // Create temporary text to measure dimensions
-            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 = barCenterX;
-            let labelY = (barTop + barBottom) / 2; // Default to middle
-            let shouldRender = true;
-            if (position === 'outside') {
-                const plotTop = y.range()[1];
-                const plotBottom = y.range()[0];
-                labelY = isNegative
-                    ? barBottom + boxHeight / 2 + 4
-                    : barTop - boxHeight / 2 - 4;
-                if ((!isNegative && labelY - boxHeight / 2 < plotTop) ||
-                    (isNegative && labelY + boxHeight / 2 > plotBottom)) {
-                    shouldRender = false;
-                }
-            }
-            else {
-                if (mode === 'layer' && insidePosition === 'bottom') {
-                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
-                    shouldRender = false;
-                }
-                else {
-                    const { inset, minPadding } = getLabelSpacing(mode);
-                    switch (insidePosition) {
-                        case 'top':
-                            labelY = barTop + boxHeight / 2 + inset;
-                            break;
-                        case 'middle':
-                            labelY = (barTop + barBottom) / 2;
-                            break;
-                        case 'bottom':
-                            labelY = barBottom - boxHeight / 2 - inset;
-                            break;
-                    }
-                    if (boxHeight + minPadding > barHeight) {
-                        shouldRender = false;
-                    }
-                }
-            }
-            tempText.remove();
-            if (shouldRender) {
-                const labelColor = position === 'inside' && config.color === undefined
-                    ? getContrastTextColor(barColor)
-                    : defaultLabelColor;
-                const group = labelGroup.append('g');
-                if (position === 'outside') {
-                    // Draw rounded rectangle background
-                    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);
-                }
-                // Draw text
-                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', labelColor)
-                    .style('pointer-events', 'none')
-                    .text(valueText);
-            }
-        });
+        data.forEach((dataItem, index) => this.renderVerticalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, xScaleType, stackingContext, config, barWidth, barOffset, mode, plotTop, plotBottom));
     }
     renderHorizontalValueLabels(plotGroup, data, xKey, x, y, parseValue, yScaleType, theme, stackingContext) {
         const bandwidth = y.bandwidth ? y.bandwidth() : 20;
         const mode = stackingContext?.mode ?? 'normal';
         const { thickness: barHeight, offset: barOffset } = getBarSlotLayout(bandwidth, mode, this.maxBarSize, stackingContext?.totalSeries ?? 1, stackingContext?.seriesIndex ?? 0, stackingContext?.gap ?? 0.1);
-        const config = this.valueLabel;
-        const position = config.position || 'outside';
-        const insidePosition = config.insidePosition || 'top';
-        const fontSize = config.fontSize ?? theme.valueLabel.fontSize;
-        const fontFamily = config.fontFamily ?? theme.valueLabel.fontFamily;
-        const fontWeight = config.fontWeight ?? theme.valueLabel.fontWeight;
-        const defaultLabelColor = config.color ?? theme.valueLabel.color;
-        const background = config.background ?? theme.valueLabel.background;
-        const border = config.border ?? theme.valueLabel.border;
-        const borderRadius = config.borderRadius ?? theme.valueLabel.borderRadius;
-        const padding = config.padding ?? theme.valueLabel.padding;
+        const config = this.resolveValueLabelConfig(theme);
+        const plotLeft = Math.min(...x.range());
+        const plotRight = Math.max(...x.range());
         const labelGroup = plotGroup
             .append('g')
             .attr('class', `bar-value-labels-${sanitizeForCSS(this.dataKey)}`);
-        data.forEach((d, i) => {
-            const categoryKey = String(d[xKey]);
-            const rawValue = parseValue(d[this.dataKey]);
-            const renderedValue = this.getRenderedValue(rawValue, 'horizontal');
-            const valueText = String(rawValue);
-            const yPos = getScalePosition(y, d[xKey], yScaleType);
-            const barColor = this.colorAdapter
-                ? this.colorAdapter(d, i)
-                : this.fill;
-            const { start, end } = getBarValueRange(categoryKey, renderedValue, stackingContext);
-            const bounds = getScaledValueRange(x, start, end);
-            const barLeft = bounds.min;
-            const barRight = bounds.max;
-            const isNegative = renderedValue < 0;
-            const barWidth = Math.abs(barRight - barLeft);
-            const barCenterY = yPos +
-                (yScaleType === 'band' ? barOffset : -barHeight / 2) +
-                barHeight / 2;
-            // Create temporary text to measure dimensions
-            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;
-            let labelX = (barLeft + barRight) / 2; // Default to middle
-            const labelY = barCenterY;
-            let shouldRender = true;
-            if (position === 'outside') {
-                const plotLeft = Math.min(...x.range());
-                const plotRight = Math.max(...x.range());
-                labelX = isNegative
-                    ? barLeft - boxWidth / 2 - 4
-                    : barRight + boxWidth / 2 + 4;
-                if ((!isNegative && labelX + boxWidth / 2 > plotRight) ||
-                    (isNegative && labelX - boxWidth / 2 < plotLeft)) {
-                    shouldRender = false;
-                }
-            }
-            else {
-                if (mode === 'layer' && insidePosition === 'bottom') {
-                    // Bottom labels in layer mode are visually ambiguous and often hidden by overlap.
-                    shouldRender = false;
-                }
-                else {
-                    const { inset, minPadding } = getLabelSpacing(mode);
-                    switch (insidePosition) {
-                        case 'top':
-                            labelX = isNegative
-                                ? barRight - boxWidth / 2 - inset
-                                : barLeft + boxWidth / 2 + inset;
-                            break;
-                        case 'middle':
-                            labelX = (barLeft + barRight) / 2;
-                            break;
-                        case 'bottom':
-                            labelX = isNegative
-                                ? barLeft + boxWidth / 2 + inset
-                                : barRight - boxWidth / 2 - inset;
-                            break;
-                    }
-                    if (boxWidth + minPadding > barWidth) {
-                        shouldRender = false;
-                    }
-                    if (shouldRender &&
-                        position === 'inside' &&
-                        insidePosition !== 'middle') {
-                        const labelLeft = labelX - boxWidth / 2;
-                        const labelRight = labelX + boxWidth / 2;
-                        if (labelLeft < barLeft + 1 ||
-                            labelRight > barRight - 1) {
-                            shouldRender = false;
-                        }
-                    }
-                }
-            }
-            tempText.remove();
-            if (shouldRender) {
-                const labelColor = position === 'inside' && config.color === undefined
-                    ? getContrastTextColor(barColor)
-                    : defaultLabelColor;
-                const group = labelGroup.append('g');
-                if (position === 'outside') {
-                    // Draw rounded rectangle background
-                    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);
-                }
-                // Draw text
-                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', labelColor)
-                    .style('pointer-events', 'none')
-                    .text(valueText);
-            }
-        });
+        data.forEach((dataItem, index) => this.renderHorizontalValueLabel(labelGroup, dataItem, index, xKey, x, y, parseValue, yScaleType, stackingContext, config, barHeight, barOffset, mode, plotLeft, plotRight));
     }
 }

package/dist/base-chart.d.ts

@@ -105,6 +105,7 @@ export declare abstract class BaseChart {
      */
     private performRender;
     protected resolveRenderDimensions(containerRect: DOMRect): RenderDimensions;
+    private pushIfIncluded;
     private resolveAccessibleLabel;
     private syncAccessibleLabelFromSvg;
     protected resolveResponsiveContext(context: {
@@ -208,6 +209,10 @@ export declare abstract class BaseChart {
     private exportImage;
     private exportPDF;
     protected exportSVG(options?: ExportOptions, formatForHooks?: VisualExportFormat): Promise<string>;
+    private requireRenderedSvg;
+    private resolveExportContext;
+    private createExportSvgClone;
+    private populateExportChart;
     protected exportJSON(): string;
 }
 export {};