@gravity-ui/charts 1.46.1 → 1.48.0

package/dist/esm/core/axes/types.d.ts

@@ -1,4 +1,4 @@
-import type { AxisCrosshair, AxisPlotBand, AxisPlotShape, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisTitleRotation, ChartAxisType, DeepRequired, MeaningfulAny, PlotLayerPlacement } from '../../types';
+import type { AxisCrosshair, AxisPlotBand, AxisPlotShape, BaseTextStyle, ChartAxis, ChartAxisLabels, ChartAxisRangeSlider, ChartAxisTitleAlignment, ChartAxisTitleRotation, ChartAxisType, DeepRequired, MeaningfulAny, PlotBandAlign, PlotLayerPlacement } from '../../types';
 import type { DashStyle } from '../constants';
 type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style' | 'autoRotation'> & Required<Pick<ChartAxisLabels, 'enabled' | 'padding' | 'margin' | 'rotation' | 'html'>> & {
     style: BaseTextStyle;
@@ -8,7 +8,8 @@ type PreparedAxisLabels = Omit<ChartAxisLabels, 'enabled' | 'padding' | 'style'
     lineHeight: number;
     maxWidth: number;
 };
-export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
+export type PreparedAxisPlotBand = Required<Omit<AxisPlotBand, 'size' | 'align'>> & {
+    align: PlotBandAlign;
     custom?: MeaningfulAny;
     label: {
         text: string;
@@ -16,6 +17,7 @@ export type PreparedAxisPlotBand = Required<AxisPlotBand> & {
         padding: number;
         qa?: string;
     };
+    size?: number | string;
 };
 type PreparedAxisCrosshair = Required<AxisCrosshair>;
 export type PreparedAxisPlotLine = {

package/dist/esm/core/axes/x-axis.js

@@ -166,6 +166,8 @@ export const getPreparedXAxis = async ({ xAxis, seriesData, width, boundsWidth,
             opacity: get(d, 'opacity', 1),
             from: get(d, 'from', 0),
             to: get(d, 'to', 0),
+            align: get(d, 'align', 'start'),
+            size: d.size,
             layerPlacement: get(d, 'layerPlacement', 'before'),
             custom: d.custom,
             label: prepareAxisPlotLabel(d),

package/dist/esm/core/axes/y-axis.js

@@ -181,6 +181,8 @@ export const getPreparedYAxis = ({ height, boundsHeight, width, seriesData, yAxi
                 opacity: get(d, 'opacity', 1),
                 from: get(d, 'from', 0),
                 to: get(d, 'to', 0),
+                align: get(d, 'align', 'start'),
+                size: d.size,
                 layerPlacement: get(d, 'layerPlacement', 'before'),
                 custom: d.custom,
                 label: prepareAxisPlotLabel(d),

package/dist/esm/core/brush/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/core/brush/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/{hooks/useBrush → core/brush}/types.d.ts

@@ -1,6 +1,6 @@
 import type { BrushBehavior } from 'd3-brush';
-import type { ZoomType } from '../../core/constants';
-import type { ChartBrush, DeepRequired } from '../../types';
+import type { ZoomType } from '../constants';
+import type { ChartBrush, DeepRequired } from '../types';
 export type BrushSelection = [number, number] | [[number, number], [number, number]];
 export interface BrushArea {
     /**

package/dist/esm/core/brush/types.js

@@ -0,0 +1 @@
+export {};

package/dist/{cjs/hooks/useBrush → esm/core/brush}/utils.d.ts

@@ -1,5 +1,5 @@
 import type { BrushBehavior } from 'd3-brush';
-import type { ChartBrush, DeepRequired } from '../../types';
+import type { ChartBrush, DeepRequired } from '../types';
 import type { BrushSelection } from './types';
 export declare function isOneDimensionalSelection(selection?: BrushSelection | null): selection is [number, number];
 export declare function setBrushBorder(this: SVGGElement, _brushInstance: BrushBehavior<unknown>, selection: BrushSelection | null, options: {

package/dist/esm/core/chart/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/dist/esm/core/chart/index.js

@@ -0,0 +1 @@
+export * from './types';

package/dist/esm/core/chart/types.d.ts

@@ -0,0 +1,8 @@
+import type { ChartBrush, ChartMargin, ChartZoom, DeepRequired } from '../types';
+export type PreparedZoom = DeepRequired<Omit<ChartZoom, 'enabled' | 'brush'>> & DeepRequired<{
+    brush: ChartBrush;
+}>;
+export type PreparedChart = {
+    margin: ChartMargin;
+    zoom: PreparedZoom | null;
+};

package/dist/esm/core/chart/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/core/index.d.ts

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './axes';
 export * from './layout';
 export * from './zoom';
+export * from './brush';
+export * from './range-slider';
+export * from './chart';

package/dist/esm/core/index.js

@@ -8,3 +8,6 @@ export * from './scales';
 export * from './axes';
 export * from './layout';
 export * from './zoom';
+export * from './brush';
+export * from './range-slider';
+export * from './chart';

package/dist/esm/core/layout/chart-dimensions.d.ts

@@ -1,6 +1,6 @@
-import type { PreparedChart } from '../../hooks/types';
 import type { ChartMargin, LegendConfig } from '../../types';
 import type { PreparedXAxis, PreparedYAxis } from '../axes/types';
+import type { PreparedChart } from '../chart/types';
 import type { PreparedLegend, PreparedSeries } from '../series';
 export declare const getBoundsWidth: (args: {
     chartWidth: number;

package/dist/esm/core/range-slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/core/range-slider/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './utils';

package/dist/esm/core/range-slider/types.d.ts

@@ -0,0 +1,4 @@
+export type RangeSliderState = {
+    max: number;
+    min: number;
+};

package/dist/esm/core/range-slider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.d.ts

@@ -1,8 +1,8 @@
-import type { ChartScale } from '../../core/scales/types';
-import type { PreparedLegend } from '../../core/series/types';
-import type { PreparedChart } from '../types';
-import type { PreparedRangeSlider } from '../useAxis/types';
-import type { BrushSelection } from '../useBrush/types';
+import type { PreparedRangeSlider } from '../axes/types';
+import type { BrushSelection } from '../brush/types';
+import type { PreparedChart } from '../chart/types';
+import type { ChartScale } from '../scales/types';
+import type { PreparedLegend } from '../series/types';
 import type { RangeSliderState } from './types';
 export declare function getRangeSliderOffsetTop(args: {
     height: number;

package/dist/esm/{hooks/useRangeSlider → core/range-slider}/utils.js

@@ -1,4 +1,4 @@
-import { isBandScale } from '../../core/utils';
+import { isBandScale } from '../utils';
 export function getRangeSliderOffsetTop(args) {
     var _a, _b;
     const { height, preparedChart, preparedLegend, preparedRangeSlider } = args;

package/dist/esm/core/scales/x-scale.d.ts

@@ -1,7 +1,7 @@
-import type { RangeSliderState } from '../../hooks';
-import type { ChartAxis, ChartSeries } from '../../types';
 import type { PreparedAxis } from '../axes/types';
+import type { RangeSliderState } from '../range-slider/types';
 import type { PreparedSeries } from '../series';
+import type { ChartAxis, ChartSeries } from '../types';
 export declare function createXScale(args: {
     axis: PreparedAxis | ChartAxis;
     boundsWidth: number;

package/dist/esm/core/scales/y-scale.js

@@ -218,6 +218,27 @@ export function createYScale(args) {
                 else {
                     yMax = hasSeriesWithVolumeOnYAxis ? Math.max(yMaxDomain, 0) : yMaxDomain;
                 }
+                // When the user pins only one of min/max on the wrong side of all data,
+                // d3 produces either an inverted scale (yMax<yMin, silently flips the
+                // axis) or a degenerate one (yMax===yMin, maps everything to the range
+                // midpoint); both leave phantom hover targets inside an empty plot.
+                // Expand the auto-computed side so the scale stays sane. Only applies
+                // when the opposite bound is auto-derived — if the user supplied both
+                // bounds, trust the explicit range and let point filtering hide the
+                // rest. Comparison uses the raw data extent because upstream coercions
+                // like volume-series `yMax = Math.max(yMaxDomain, 0)` can make the
+                // post-coerced yMin/yMax lie about where data actually sits.
+                // Logarithmic has its own guard.
+                if (axis.type === 'linear') {
+                    const minIsUserSet = typeof yMinPropsOrState === 'number';
+                    const maxIsUserSet = typeof yMaxPropsOrState === 'number';
+                    if (minIsUserSet && !maxIsUserSet && yMaxDomain < yMin) {
+                        yMax = yMin + Math.max(Math.abs(yMin), 1);
+                    }
+                    else if (maxIsUserSet && !minIsUserSet && yMinDomain > yMax) {
+                        yMin = yMax - Math.max(Math.abs(yMax), 1);
+                    }
+                }
                 const scaleFn = axis.type === 'logarithmic' ? scaleLog : scaleLinear;
                 let scale = scaleFn().domain([yMin, yMax]).range(range);
                 let offsetMin = 0;

package/dist/esm/core/series/prepare-legend.d.ts

@@ -1,5 +1,5 @@
-import type { PreparedChart } from '../../hooks/types';
 import type { ChartData } from '../../types';
+import type { PreparedChart } from '../chart/types';
 import type { LegendItem, PreparedLegend, PreparedSeries } from './types';
 export declare function getPreparedLegend(args: {
     legend: ChartData['legend'];

package/dist/esm/core/series/prepare-scatter.js

@@ -1,8 +1,8 @@
 import get from 'lodash/get';
 import merge from 'lodash/merge';
-import { seriesRangeSliderOptionsDefaults } from '../constants';
+import { DEFAULT_DATALABELS_STYLE, seriesRangeSliderOptionsDefaults } from '../constants';
 import { getSymbolType, getUniqId } from '../utils';
-import { DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS } from './constants';
+import { DEFAULT_DATALABELS_PADDING, DEFAULT_HALO_OPTIONS, DEFAULT_POINT_MARKER_OPTIONS, } from './constants';
 import { prepareLegendSymbol } from './utils';
 function prepareMarker(series, seriesOptions, index) {
     const seriesHoverState = get(seriesOptions, 'scatter.states.hover');
@@ -39,7 +39,7 @@ function prepareSeriesData(series) {
 export function prepareScatterSeries(args) {
     const { colorScale, series, seriesOptions, legend } = args;
     return series.map((s, index) => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const id = getUniqId();
         const name = 'name' in s && s.name ? s.name : '';
         const symbolType = s.symbolType || getSymbolType(index);
@@ -56,6 +56,14 @@ export function prepareScatterSeries(args) {
                 itemText: (_f = (_e = s.legend) === null || _e === void 0 ? void 0 : _e.itemText) !== null && _f !== void 0 ? _f : name,
             },
             data: prepareSeriesData(s),
+            dataLabels: {
+                enabled: ((_g = s.dataLabels) === null || _g === void 0 ? void 0 : _g.enabled) || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, (_h = s.dataLabels) === null || _h === void 0 ? void 0 : _h.style),
+                padding: get(s, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                allowOverlap: get(s, 'dataLabels.allowOverlap', false),
+                html: get(s, 'dataLabels.html', false),
+                format: (_j = s.dataLabels) === null || _j === void 0 ? void 0 : _j.format,
+            },
             marker: prepareMarker(s, seriesOptions, index),
             cursor: get(s, 'cursor', null),
             yAxis: get(s, 'yAxis', 0),

package/dist/esm/core/series/types.d.ts

@@ -101,6 +101,14 @@ type BasePreparedAxisRelatedSeries = {
 export type PreparedScatterSeries = {
     type: ScatterSeries['type'];
     data: ScatterSeriesData[];
+    dataLabels: {
+        enabled: boolean;
+        style: BaseTextStyle;
+        padding: number;
+        allowOverlap: boolean;
+        html: boolean;
+        format?: ValueFormat;
+    };
     marker: {
         states: {
             normal: {

package/dist/esm/core/shapes/area/prepare-data.js

@@ -2,9 +2,8 @@ import { group, min, sort } from 'd3-array';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { prepareAnnotation } from '../../series/prepare-annotation';
-import { getXValue, getYValue } from '../../shapes/utils';
-import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
-import { getFormattedValue } from '../../utils/format';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../../shapes/utils';
+import { getDataCategoryValue, preparePointDataLabels } from '../../utils';
 function getXValues(series, xAxis, xScale) {
     const categories = xAxis.categories || [];
     const xValues = series.reduce((acc, s) => {
@@ -30,52 +29,6 @@ function getXValues(series, xAxis, xScale) {
     }
     return sort(Array.from(xValues), (d) => d[1]);
 }
-async function prepareDataLabels({ series, points, xMax, yAxisTop, isOutsideBounds, }) {
-    var _a;
-    const svgLabels = [];
-    const htmlLabels = [];
-    const getTextSize = getTextSizeFn({ style: series.dataLabels.style });
-    for (let pointsIndex = 0; pointsIndex < points.length; pointsIndex++) {
-        const point = points[pointsIndex];
-        if (point.y === null || isOutsideBounds(point.x, point.y)) {
-            continue;
-        }
-        const text = getFormattedValue(Object.assign({ value: (_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y }, series.dataLabels));
-        if (series.dataLabels.html) {
-            const size = await getLabelsSize({
-                labels: [text],
-                style: series.dataLabels.style,
-                html: series.dataLabels.html,
-            });
-            const labelSize = { width: size.maxWidth, height: size.maxHeight };
-            const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
-            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height);
-            htmlLabels.push({
-                x,
-                y,
-                content: text,
-                size: labelSize,
-                style: series.dataLabels.style,
-            });
-        }
-        else {
-            const labelSize = await getTextSize(text);
-            const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
-            const y = Math.max(yAxisTop, point.y - series.dataLabels.padding - labelSize.height + labelSize.hangingOffset);
-            svgLabels.push({
-                text,
-                x,
-                y,
-                style: series.dataLabels.style,
-                size: labelSize,
-                textAnchor: 'start',
-                series,
-                active: true,
-            });
-        }
-    }
-    return { svgLabels, htmlLabels };
-}
 export const prepareAreaData = async (args) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { series, seriesOptions, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider, } = args;
@@ -315,6 +268,11 @@ export const prepareAreaData = async (args) => {
                     }
                     return result;
                 }, []);
+                markHiddenPointsOutOfYRange({
+                    points,
+                    yScale: seriesYScale,
+                    yAxisTop,
+                });
                 seriesStackData.push({
                     annotations,
                     points,
@@ -335,7 +293,7 @@ export const prepareAreaData = async (args) => {
                 const currentYAxis = yAxis[item.series.yAxis];
                 const itemYAxisTop = ((_p = split.plots[currentYAxis.plotIndex]) === null || _p === void 0 ? void 0 : _p.top) || 0;
                 if (item.series.dataLabels.enabled && !isRangeSlider) {
-                    const labelsData = await prepareDataLabels({
+                    const labelsData = await preparePointDataLabels({
                         series: item.series,
                         points: item.points,
                         xMax,

package/dist/esm/core/shapes/area/renderer.js

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } from '../../utils';
 import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../marker';
 import { setActiveState } from '../utils';
 const b = block('area');
@@ -17,7 +18,7 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
     const inactiveOptions = get(seriesOptions, 'area.states.inactive');
     const line = lineGenerator()
         .x((d) => d.x)
-        .defined((d) => d.y !== null)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
     markersSvgElement.selectAll('*').remove();
@@ -37,7 +38,7 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
         .attr('stroke-linejoin', 'round')
         .attr('stroke-linecap', 'round');
     const area = areaGenerator()
-        .defined((d) => d.y !== null)
+        .defined((d) => d.y !== null && !d.hiddenInLine)
         .x((d) => d.x)
         .y0((d) => d.y0)
         .y1((d) => d.y);
@@ -53,18 +54,11 @@ export function renderArea(elements, preparedData, seriesOptions, allowOverlapDa
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelsSelection = plotSvgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelsSelection = renderDataLabels({
+        container: plotSvgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const markers = preparedData.reduce((acc, d) => acc.concat(d.markers), []);
     const markerSelection = markersSvgElement
         .selectAll('marker')

package/dist/esm/core/shapes/area/types.d.ts

@@ -1,13 +1,14 @@
 import type { AreaSeriesData, HtmlItem, LabelData } from '../../../types';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedAreaSeries } from '../../series/types';
 export type PointData = {
-    y0: number;
-    x: number;
-    y: number | null;
-    data: AreaSeriesData;
-    series: PreparedAreaSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: AreaSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedAreaSeries;
+    x: number;
+    y: number | null;
+    y0: number;
 };
 export type MarkerPointData = PointData & {
     y: number;

package/dist/esm/core/shapes/bar-x/prepare-data.js

@@ -3,37 +3,59 @@ import get from 'lodash/get';
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { getSeriesStackId } from '../../series/utils';
 import { MIN_BAR_GAP, MIN_BAR_GROUP_GAP, MIN_BAR_WIDTH } from '../../shapes/bar-constants';
-import { getDataCategoryValue, getLabelsSize } from '../../utils';
+import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
 import { getBandSize } from '../../utils/band-size';
 import { getFormattedValue } from '../../utils/format';
 const isSeriesDataValid = (d) => d.y !== null;
 async function getLabelData(d, xMax) {
     var _a;
     if (!d.series.dataLabels.enabled) {
-        return undefined;
+        return {};
     }
     const text = getFormattedValue(Object.assign({ value: (_a = d.data.label) !== null && _a !== void 0 ? _a : d.data.y }, d.series.dataLabels));
     const style = d.series.dataLabels.style;
-    const html = d.series.dataLabels.html;
-    const { maxHeight: height, maxWidth: width } = await getLabelsSize({
-        labels: [text],
-        style,
-        html,
-    });
-    let y = Math.max(height, d.y - d.series.dataLabels.padding);
-    if (d.series.dataLabels.inside) {
-        y = d.y + d.height / 2;
+    if (d.series.dataLabels.html) {
+        const { maxHeight: height, maxWidth: width } = await getLabelsSize({
+            labels: [text],
+            style,
+            html: true,
+        });
+        let y = Math.max(height, d.y - d.series.dataLabels.padding);
+        if (d.series.dataLabels.inside) {
+            y = d.y + d.height / 2;
+        }
+        const centerX = Math.min(xMax - width / 2, Math.max(width / 2, d.x + d.width / 2));
+        return {
+            htmlLabel: {
+                content: text,
+                x: centerX - width / 2,
+                y: y - height,
+                size: { width, height },
+                style,
+            },
+        };
+    }
+    else {
+        const getTextSize = getTextSizeFn({ style });
+        const { width, height, hangingOffset } = await getTextSize(text);
+        let y = Math.max(hangingOffset, d.y - height + hangingOffset - d.series.dataLabels.padding);
+        if (d.series.dataLabels.inside) {
+            const centerY = d.y + d.height / 2;
+            y = Math.min(d.y + d.height - height + hangingOffset, centerY - height / 2 + hangingOffset);
+        }
+        const centerX = Math.min(xMax - width / 2, Math.max(width / 2, d.x + d.width / 2));
+        return {
+            svgLabel: {
+                text,
+                x: centerX,
+                y,
+                style,
+                size: { width, height, hangingOffset },
+                textAnchor: 'middle',
+                series: d.series,
+            },
+        };
     }
-    const centerX = Math.min(xMax - width / 2, Math.max(width / 2, d.x + d.width / 2));
-    return {
-        text,
-        x: html ? centerX - width / 2 : centerX,
-        y: html ? y - height : y,
-        style,
-        size: { width, height },
-        textAnchor: 'middle',
-        series: d.series,
-    };
 }
 export const prepareBarXData = async (args) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -232,20 +254,12 @@ export const prepareBarXData = async (args) => {
         if (barData.series.dataLabels.enabled &&
             !isRangeSlider &&
             (!isBarOutsideBounds || isZeroValue)) {
-            const label = await getLabelData(barData, xMax);
-            if (label) {
-                if (barData.series.dataLabels.html) {
-                    barData.htmlLabels.push({
-                        x: label.x,
-                        y: label.y,
-                        content: label.text,
-                        size: label.size,
-                        style: label.style,
-                    });
-                }
-                else {
-                    barData.svgLabels.push(label);
-                }
+            const { svgLabel, htmlLabel } = await getLabelData(barData, xMax);
+            if (svgLabel) {
+                barData.svgLabels.push(svgLabel);
+            }
+            if (htmlLabel) {
+                barData.htmlLabels.push(htmlLabel);
             }
         }
     }

package/dist/esm/core/shapes/bar-x/renderer.js

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { filterOverlappingLabels } from '../../utils';
 import { renderAnnotations } from '../annotation';
+import { renderDataLabels } from '../data-labels';
 import { getRectPath } from '../utils';
 const b = block('bar-x');
 export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
@@ -37,18 +38,11 @@ export function renderBarX(elements, preparedData, seriesOptions, allowOverlapDa
     if (!allowOverlapDataLabels) {
         dataLabels = filterOverlappingLabels(dataLabels);
     }
-    const labelSelection = svgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const annotationAnchors = [];
     for (const d of preparedData) {
         if (d.annotation) {

package/dist/esm/core/shapes/bar-y/renderer.js

@@ -2,6 +2,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import get from 'lodash/get';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 import { getAdjustedRectBorderPath, getAdjustedRectPath } from './utils';
 const b = block('bar-y');
 export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
@@ -31,18 +32,11 @@ export function renderBarY(elements, preparedData, seriesOptions, dispatcher) {
         .attr('fill-rule', 'evenodd')
         .attr('opacity', (d) => d.data.opacity || null)
         .attr('pointer-events', 'none');
-    const labelSelection = svgElement
-        .selectAll('text')
-        .data(dataLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    const labelSelection = renderDataLabels({
+        container: svgElement,
+        data: dataLabels,
+        className: b('label'),
+    });
     const hoverOptions = get(seriesOptions, 'bar-y.states.hover');
     const inactiveOptions = get(seriesOptions, 'bar-y.states.inactive');
     function handleShapeHover(data) {

package/dist/esm/core/shapes/data-labels.d.ts

@@ -0,0 +1,15 @@
+import type { Selection } from 'd3-selection';
+import type { BaseTextStyle } from '../types/chart/base';
+type RenderableLabelData = {
+    text: string;
+    x: number;
+    y: number;
+    textAnchor: 'start' | 'end' | 'middle';
+    style: BaseTextStyle;
+};
+export declare function renderDataLabels<T extends RenderableLabelData>(args: {
+    container: Selection<SVGGElement, unknown, null, undefined>;
+    data: T[];
+    className: string;
+}): Selection<SVGTextElement, T, SVGGElement, unknown>;
+export {};

package/dist/esm/core/shapes/data-labels.js

@@ -0,0 +1,15 @@
+export function renderDataLabels(args) {
+    const { container, data, className } = args;
+    return container
+        .selectAll('text')
+        .data(data)
+        .join('text')
+        .html((d) => d.text)
+        .attr('class', className)
+        .attr('x', (d) => d.x)
+        .attr('y', (d) => d.y)
+        .attr('text-anchor', (d) => d.textAnchor)
+        .style('font-size', (d) => d.style.fontSize)
+        .style('font-weight', (d) => d.style.fontWeight || null)
+        .style('fill', (d) => d.style.fontColor || null);
+}