@gravity-ui/charts 1.46.1 → 1.48.0

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

@@ -2,6 +2,7 @@ import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
 import { getLineDashArray } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('funnel');
 export function renderFunnel(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
@@ -44,17 +45,11 @@ export function renderFunnel(elements, preparedData, seriesOptions, dispatcher)
     connectorLines.append('path').attr('d', (d) => d.linePath[0].toString());
     connectorLines.append('path').attr('d', (d) => d.linePath[1].toString());
     // dataLabels
-    svgElement
-        .selectAll('text')
-        .data(preparedData.svgLabels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.svgLabels,
+        className: b('label'),
+    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         if (hoverEnabled) {

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

@@ -84,6 +84,7 @@ export async function prepareHeatmapData({ series, xAxis, xScale, yAxis, yScale,
                             x: item.x + item.width / 2 - size.width / 2,
                             y: item.y + item.height / 2 - size.height / 2 + size.hangingOffset,
                             text,
+                            textAnchor: 'start',
                             style: series.dataLabels.style,
                         });
                     }

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

@@ -1,6 +1,7 @@
 import { color } from 'd3-color';
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('heatmap');
 export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher) {
     var _a, _b;
@@ -20,17 +21,11 @@ export function renderHeatmap(elements, preparedData, seriesOptions, dispatcher)
         .attr('stroke', (d) => d.borderColor)
         .attr('stroke-width', (d) => d.borderWidth);
     // dataLabels
-    svgElement
-        .selectAll('text')
-        .data(preparedData.labels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.labels,
+        className: b('label'),
+    });
     function handleShapeHover(data) {
         const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
         if (hoverEnabled) {

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

@@ -14,6 +14,7 @@ export type HeatmapLabel = {
     x: number;
     y: number;
     text: string;
+    textAnchor: 'start' | 'end' | 'middle';
     style: BaseTextStyle;
 };
 export type PreparedHeatmapData = {

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

@@ -1,22 +1,8 @@
 import { prepareAnnotation } from '../../series/prepare-annotation';
-import { filterOverlappingLabels, getLabelsSize, getTextSizeFn } from '../../utils';
-import { getFormattedValue } from '../../utils/format';
-import { getXValue, getYValue } from '../utils';
-async function getHtmlLabel(point, series, xMax) {
-    var _a;
-    const content = String((_a = point.data.label) !== null && _a !== void 0 ? _a : point.data.y);
-    const size = await getLabelsSize({ labels: [content], html: true });
-    const width = size.maxWidth;
-    return {
-        x: Math.min(xMax - size.maxWidth, Math.max(0, point.x - width / 2)),
-        y: Math.max(0, point.y - series.dataLabels.padding - size.maxHeight),
-        content,
-        size: { width, height: size.maxHeight },
-        style: series.dataLabels.style,
-    };
-}
+import { filterOverlappingLabels, preparePointDataLabels } from '../../utils';
+import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../utils';
 export const prepareLineData = async (args) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const { series, seriesOptions, xAxis, yAxis, xScale, yScale, split, isOutsideBounds, isRangeSlider, otherLayers, } = args;
     const [_xMin, xRangeMax] = xScale.range();
     const xMax = xRangeMax;
@@ -58,46 +44,15 @@ export const prepareLineData = async (args) => {
         let htmlElements = [];
         let svgLabels = [];
         if (s.dataLabels.enabled && !isRangeSlider) {
-            if (s.dataLabels.html) {
-                const list = await Promise.all(points.reduce((result, p) => {
-                    if (p.y === null || p.x === null || isOutsideBounds(p.x, p.y)) {
-                        return result;
-                    }
-                    result.push(getHtmlLabel(p, s, xMax));
-                    return result;
-                }, []));
-                htmlElements.push(...list);
-            }
-            else {
-                const getTextSize = getTextSizeFn({ style: s.dataLabels.style });
-                for (let index = 0; index < points.length; index++) {
-                    const point = points[index];
-                    if (point.y !== null &&
-                        point.x !== null &&
-                        !isOutsideBounds(point.x, point.y)) {
-                        const labelValue = (_e = point.data.label) !== null && _e !== void 0 ? _e : point.data.y;
-                        const text = getFormattedValue(Object.assign({ value: labelValue }, s.dataLabels));
-                        const labelSize = await getTextSize(text);
-                        const style = s.dataLabels.style;
-                        const y = Math.max(yAxisTop, point.y -
-                            s.dataLabels.padding -
-                            labelSize.height +
-                            labelSize.hangingOffset);
-                        const x = Math.min(xMax - labelSize.width, Math.max(0, point.x - labelSize.width / 2));
-                        const labelData = {
-                            text,
-                            x,
-                            y,
-                            style,
-                            size: labelSize,
-                            textAnchor: 'start',
-                            series: s,
-                            active: true,
-                        };
-                        svgLabels.push(labelData);
-                    }
-                }
-            }
+            const labelsData = await preparePointDataLabels({
+                series: s,
+                points,
+                xMax,
+                yAxisTop,
+                isOutsideBounds,
+            });
+            svgLabels = labelsData.svgLabels;
+            htmlElements = labelsData.htmlLabels;
         }
         if (!s.dataLabels.allowOverlap) {
             svgLabels = filterOverlappingLabels(svgLabels, otherLayers.map((l) => l.svgLabels).flat());
@@ -129,6 +84,14 @@ export const prepareLineData = async (args) => {
             }
             return result;
         }, []);
+        markHiddenPointsOutOfYRange({
+            points,
+            yScale: seriesYScale,
+            yAxisTop,
+            axisMin: seriesYAxis.min,
+            axisMax: seriesYAxis.max,
+            getDataY: (p) => p.data.y,
+        });
         const result = {
             annotations,
             points,
@@ -140,11 +103,11 @@ export const prepareLineData = async (args) => {
             id: s.id,
             htmlLabels: htmlElements,
             color: s.color,
-            lineWidth: (_f = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _f !== void 0 ? _f : s.lineWidth,
+            lineWidth: (_e = (isRangeSlider ? s.rangeSlider.lineWidth : undefined)) !== null && _e !== void 0 ? _e : s.lineWidth,
             dashStyle: s.dashStyle,
             linecap: s.linecap,
             linejoin: s.linejoin,
-            opacity: (_g = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _g !== void 0 ? _g : s.opacity,
+            opacity: (_f = (isRangeSlider ? s.rangeSlider.opacity : undefined)) !== null && _f !== void 0 ? _f : s.opacity,
         };
         acc.push(result);
     }

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

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { getLineDashArray } 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('line');
@@ -17,7 +18,7 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     const hoverOptions = get(seriesOptions, 'line.states.hover');
     const inactiveOptions = get(seriesOptions, 'line.states.inactive');
     const line = lineGenerator()
-        .defined((d) => d.y !== null && d.x !== null)
+        .defined((d) => d.y !== null && d.x !== null && !d.hiddenInLine)
         .x((d) => d.x)
         .y((d) => d.y);
     plotSvgElement.selectAll('*').remove();
@@ -38,18 +39,11 @@ export function renderLine(elements, preparedData, seriesOptions, dispatcher) {
     const dataLabels = preparedData.reduce((acc, d) => {
         return acc.concat(d.svgLabels);
     }, []);
-    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/line/types.d.ts

@@ -2,12 +2,13 @@ import type { HtmlItem, LabelData, LineSeriesData, LineSeriesLineBaseStyle } fro
 import type { DashStyle, LineCap, LineJoin } from '../../constants';
 import type { AnnotationAnchor, PreparedAnnotation, PreparedLineSeries } from '../../series/types';
 export type PointData = {
-    x: number | null;
-    y: number | null;
-    data: LineSeriesData;
-    series: PreparedLineSeries;
     annotation?: PreparedAnnotation;
     color?: string;
+    data: LineSeriesData;
+    hiddenInLine?: boolean;
+    series: PreparedLineSeries;
+    x: number | null;
+    y: number | null;
 };
 export type MarkerPointData = PointData & {
     y: number;

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

@@ -3,6 +3,7 @@ import { select } from 'd3-selection';
 import { line } from 'd3-shape';
 import get from 'lodash/get';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../../shapes/data-labels';
 import { getMarkerHaloVisibility, getMarkerVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
 import { setActiveState } from '../../shapes/utils';
 const b = block('radar');
@@ -59,18 +60,13 @@ export function renderRadar(elements, preparedData, seriesOptions, dispatcher) {
         .join('g')
         .call(renderMarker);
     // Render labels
-    radarSelection
-        .selectAll('text')
-        .data((radarData) => radarData.labels)
-        .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);
+    radarSelection.each(function (radarData) {
+        renderDataLabels({
+            container: select(this),
+            data: radarData.labels,
+            className: b('label'),
+        });
+    });
     // Handle hover events
     const eventName = `hover-shape.radar`;
     const hoverOptions = get(seriesOptions, 'radar.states.hover');

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

@@ -1,5 +1,6 @@
 import { select } from 'd3-selection';
 import { block } from '../../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('sankey');
 export function renderSankey(elements, preparedData, _seriesOptions, dispatcher) {
     const svgElement = select(elements.plot);
@@ -28,18 +29,11 @@ export function renderSankey(elements, preparedData, _seriesOptions, dispatcher)
         .attr('stroke', (d) => d.color)
         .attr('stroke-width', (d) => d.strokeWidth);
     // dataLabels
-    svgElement
-        .append('g')
-        .selectAll()
-        .data(preparedData.labels)
-        .join('text')
-        .html((d) => d.text)
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('dy', '0.35em')
-        .attr('text-anchor', (d) => d.textAnchor)
-        .attr('fill', (d) => { var _a; return (_a = d.style.fontColor) !== null && _a !== void 0 ? _a : null; });
+    renderDataLabels({
+        container: svgElement.append('g'),
+        data: preparedData.labels,
+        className: b('label'),
+    }).attr('dy', '0.35em');
     const eventName = `hover-shape.sankey`;
     dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher.on(eventName, (_data) => {
         // no-op hover handler

package/dist/esm/core/shapes/scatter/prepare-data.d.ts

@@ -1,12 +1,15 @@
 import type { PreparedXAxis, PreparedYAxis } from '../../axes/types';
+import type { PreparedSplit } from '../../layout/split-types';
 import type { ChartScale } from '../../scales/types';
 import type { PreparedScatterSeries } from '../../series/types';
-import type { PreparedScatterData } from './types';
+import type { PreparedScatterShapeData } from './types';
 export declare function prepareScatterData(args: {
     series: PreparedScatterSeries[];
     xAxis: PreparedXAxis;
     xScale: ChartScale;
     yAxis: PreparedYAxis[];
     yScale: (ChartScale | undefined)[];
+    split: PreparedSplit;
     isOutsideBounds: (x: number, y: number) => boolean;
-}): PreparedScatterData[];
+    isRangeSlider?: boolean;
+}): Promise<PreparedScatterShapeData>;

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

@@ -1,6 +1,6 @@
 import get from 'lodash/get';
 import { getXValue, getYValue } from '../../shapes/utils';
-import { getDataCategoryValue } from '../../utils';
+import { filterOverlappingLabels, getDataCategoryValue, preparePointDataLabels } from '../../utils';
 function getFilteredLinearScatterData(data) {
     return data.filter((d) => typeof d.x === 'number' && typeof d.y === 'number');
 }
@@ -32,9 +32,12 @@ function getFilteredCategoryScatterData(args) {
         return xInRange && yInRange;
     });
 }
-export function prepareScatterData(args) {
-    const { series, xAxis, xScale, yAxis, yScale, isOutsideBounds } = args;
-    return series.reduce((acc, s) => {
+export async function prepareScatterData(args) {
+    var _a;
+    const { series, xAxis, xScale, yAxis, yScale, split, isOutsideBounds, isRangeSlider } = args;
+    const [_xMin, xRangeMax] = xScale.range();
+    const xMax = xRangeMax;
+    const markers = series.reduce((acc, s) => {
         const yAxisIndex = get(s, 'yAxis', 0);
         const seriesYAxis = yAxis[yAxisIndex];
         const seriesYScale = yScale[yAxisIndex];
@@ -74,4 +77,40 @@ export function prepareScatterData(args) {
         });
         return acc;
     }, []);
+    const allSvgLabels = [];
+    const allHtmlLabels = [];
+    if (!isRangeSlider) {
+        for (const s of series) {
+            if (!s.dataLabels.enabled) {
+                continue;
+            }
+            const yAxisIndex = get(s, 'yAxis', 0);
+            const seriesYAxis = yAxis[yAxisIndex];
+            const seriesYScale = yScale[yAxisIndex];
+            if (!seriesYScale) {
+                continue;
+            }
+            const yAxisTop = ((_a = split.plots[seriesYAxis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
+            const seriesPoints = markers
+                .filter((m) => m.point.series.id === s.id && !m.clipped)
+                .map((m) => m.point);
+            const { svgLabels, htmlLabels } = await preparePointDataLabels({
+                series: s,
+                points: seriesPoints,
+                xMax,
+                yAxisTop,
+                isOutsideBounds,
+                anchorYOffset: s.marker.states.normal.radius,
+            });
+            if (s.dataLabels.allowOverlap) {
+                allSvgLabels.push(...svgLabels);
+                allHtmlLabels.push(...htmlLabels);
+            }
+            else {
+                allSvgLabels.push(...filterOverlappingLabels(svgLabels, allSvgLabels));
+                allHtmlLabels.push(...filterOverlappingLabels(htmlLabels, allHtmlLabels));
+            }
+        }
+    }
+    return { markers, svgLabels: allSvgLabels, htmlLabels: allHtmlLabels };
 }

package/dist/esm/core/shapes/scatter/renderer.d.ts

@@ -1,6 +1,6 @@
 import type { Dispatch } from 'd3-dispatch';
 import type { PreparedSeriesOptions } from '../../series/types';
-import type { PreparedScatterData } from './types';
+import type { PreparedScatterShapeData } from './types';
 export declare function renderScatter(elements: {
     plot: SVGGElement;
-}, preparedData: PreparedScatterData[], seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;
+}, preparedData: PreparedScatterShapeData, seriesOptions: PreparedSeriesOptions, dispatcher?: Dispatch<object>): () => void;

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

@@ -1,7 +1,10 @@
 import { select } from 'd3-selection';
 import get from 'lodash/get';
+import { block } from '../../../utils';
 import { getMarkerHaloVisibility, renderMarker, selectMarkerHalo, selectMarkerSymbol, setMarker, } from '../../shapes/marker';
 import { setActiveState, shapeKey } from '../../shapes/utils';
+import { renderDataLabels } from '../data-labels';
+const b = block('scatter');
 export function renderScatter(elements, preparedData, seriesOptions, dispatcher) {
     const svgElement = select(elements.plot);
     const hoverOptions = get(seriesOptions, 'scatter.states.hover');
@@ -9,11 +12,16 @@ export function renderScatter(elements, preparedData, seriesOptions, dispatcher)
     svgElement.selectAll('*').remove();
     const selection = svgElement
         .selectAll('path')
-        .data(preparedData, shapeKey)
+        .data(preparedData.markers, shapeKey)
         .join('g')
         .call(renderMarker)
         .attr('opacity', (d) => d.point.opacity)
         .attr('cursor', (d) => d.point.series.cursor);
+    renderDataLabels({
+        container: svgElement,
+        data: preparedData.svgLabels,
+        className: b('label'),
+    });
     const hoverEnabled = hoverOptions === null || hoverOptions === void 0 ? void 0 : hoverOptions.enabled;
     const inactiveEnabled = inactiveOptions === null || inactiveOptions === void 0 ? void 0 : inactiveOptions.enabled;
     function handleShapeHover(data) {

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

@@ -1,4 +1,4 @@
-import type { HtmlItem, ScatterSeriesData } from '../../../types';
+import type { HtmlItem, LabelData, ScatterSeriesData } from '../../../types';
 import type { PreparedScatterSeries } from '../../series/types';
 type PointData = {
     x: number;
@@ -16,4 +16,9 @@ export type MarkerData = {
     clipped: boolean;
 };
 export type PreparedScatterData = MarkerData;
+export type PreparedScatterShapeData = {
+    markers: PreparedScatterData[];
+    svgLabels: LabelData[];
+    htmlLabels: HtmlItem[];
+};
 export {};

package/dist/esm/core/shapes/utils.d.ts

@@ -22,6 +22,30 @@ export declare function getYValue(args: {
     yAxis: PreparedYAxis;
     yScale: ChartScale;
 }): number | null;
+/**
+ * Hides out-of-range points from line/area path generators via `hiddenInLine`.
+ * Neighbors of in-range points are kept as anchors so the path retains its
+ * slope at the plot edges instead of stopping abruptly at the visible point.
+ *
+ * Pixel check alone is not enough: a degenerate/clamped scale domain (see the
+ * y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
+ * phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
+ * points whose raw value is outside the user's intended range.
+ *
+ * Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
+ * value and doesn't reflect where the point actually lands on the plot.
+ */
+export declare function markHiddenPointsOutOfYRange<P extends {
+    y: number | null;
+    hiddenInLine?: boolean;
+}>(args: {
+    points: P[];
+    yScale: ChartScale;
+    yAxisTop: number;
+    axisMin?: number;
+    axisMax?: number;
+    getDataY?: (point: P) => unknown;
+}): void;
 export declare function shapeKey(d: unknown): string | number;
 export declare function setActiveState<T extends {
     active?: boolean;

package/dist/esm/core/shapes/utils.js

@@ -53,6 +53,54 @@ export function getYValue(args) {
     }
     return point.y === null ? null : yLinearScale(point.y);
 }
+// Slack for d3 scale rounding (a `500` edge can come back as `499.9999`).
+// Half a pixel matches the ±0.5 of a 1px centered stroke and far exceeds any
+// plausible float error.
+const Y_RANGE_PIXEL_TOLERANCE = 0.5;
+/**
+ * Hides out-of-range points from line/area path generators via `hiddenInLine`.
+ * Neighbors of in-range points are kept as anchors so the path retains its
+ * slope at the plot edges instead of stopping abruptly at the visible point.
+ *
+ * Pixel check alone is not enough: a degenerate/clamped scale domain (see the
+ * y-scale.ts guard) can map out-of-range data into the plot rectangle, leaving
+ * phantom hover targets. Pass `axisMin`/`axisMax` + `getDataY` to also reject
+ * points whose raw value is outside the user's intended range.
+ *
+ * Stacked shapes must NOT pass the data check — `point.data.y` is the unstacked
+ * value and doesn't reflect where the point actually lands on the plot.
+ */
+export function markHiddenPointsOutOfYRange(args) {
+    const { points, yScale, yAxisTop, axisMin, axisMax, getDataY } = args;
+    const [yRangeA, yRangeB] = yScale.range();
+    const yMinPx = yAxisTop + Math.min(yRangeA, yRangeB);
+    const yMaxPx = yAxisTop + Math.max(yRangeA, yRangeB);
+    const hasDataBoundsCheck = Boolean(getDataY) && (typeof axisMin === 'number' || typeof axisMax === 'number');
+    const isInRange = (point) => {
+        if (point.y === null) {
+            return false;
+        }
+        if (hasDataBoundsCheck) {
+            const dataY = getDataY === null || getDataY === void 0 ? void 0 : getDataY(point);
+            if (typeof dataY === 'number') {
+                if (typeof axisMin === 'number' && dataY < axisMin) {
+                    return false;
+                }
+                if (typeof axisMax === 'number' && dataY > axisMax) {
+                    return false;
+                }
+            }
+        }
+        return (point.y >= yMinPx - Y_RANGE_PIXEL_TOLERANCE &&
+            point.y <= yMaxPx + Y_RANGE_PIXEL_TOLERANCE);
+    };
+    const inRange = points.map(isInRange);
+    for (let idx = 0; idx < points.length; idx++) {
+        if (!inRange[idx] && !inRange[idx - 1] && !inRange[idx + 1]) {
+            points[idx].hiddenInLine = true;
+        }
+    }
+}
 export function shapeKey(d) {
     return d.id || -1;
 }

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

@@ -5,6 +5,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { DASH_STYLE } from '../../constants';
 import { filterOverlappingLabels, getLineDashArray, getWaterfallPointColor } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('waterfall');
 export function renderWaterfall(elements, preparedData, seriesOptions, allowOverlapDataLabels, dispatcher) {
     const svgElement = select(elements.plot);
@@ -28,18 +29,11 @@ export function renderWaterfall(elements, preparedData, seriesOptions, allowOver
     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'),
+    });
     // Add the connector line between bars
     svgElement
         .selectAll(connectorSelector)

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

@@ -4,6 +4,7 @@ import get from 'lodash/get';
 import { block } from '../../../utils';
 import { getRectPath } from '../../shapes/utils';
 import { getLineDashArray } from '../../utils';
+import { renderDataLabels } from '../data-labels';
 const b = block('x-range');
 export function renderXRange(elements, preparedData, seriesOptions, dispatcher) {
     const svgElement = select(elements.plot);
@@ -48,20 +49,13 @@ export function renderXRange(elements, preparedData, seriesOptions, dispatcher)
         .attr('opacity', (d) => { var _a; return (_a = d.data.opacity) !== null && _a !== void 0 ? _a : d.series.opacity; })
         .attr('pointer-events', 'none');
     const svgLabels = preparedData.flatMap((d) => d.svgLabels);
-    svgElement
-        .selectAll(`text.${b('label')}`)
-        .data(svgLabels)
-        .join('text')
-        .attr('class', b('label'))
-        .attr('x', (d) => d.x)
-        .attr('y', (d) => d.y)
-        .attr('text-anchor', (d) => d.textAnchor)
+    renderDataLabels({
+        container: svgElement,
+        data: svgLabels,
+        className: b('label'),
+    })
         .attr('dominant-baseline', 'central')
-        .attr('pointer-events', 'none')
-        .style('font-size', (d) => d.style.fontSize)
-        .style('font-weight', (d) => d.style.fontWeight || null)
-        .style('fill', (d) => d.style.fontColor || null)
-        .html((d) => d.text);
+        .attr('pointer-events', 'none');
     const hoverOptions = get(seriesOptions, 'x-range.states.hover');
     const inactiveOptions = get(seriesOptions, 'x-range.states.inactive');
     function handleShapeHover(data) {

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

@@ -317,6 +317,7 @@ export interface AxisPlotShape extends AxisPlot {
         plotHeight: number;
     }) => string;
 }
+export type PlotBandAlign = 'start' | 'end';
 export interface AxisPlotBand extends AxisPlot {
     /**
      * The start position of the plot band in axis units.
@@ -336,6 +337,25 @@ export interface AxisPlotBand extends AxisPlot {
      * If the value is `Infinity` or `null`, it will be treated as the end of the axis.
      */
     to: number | string | null;
+    /**
+     * Anchor side on the perpendicular axis when `size` is set.
+     *
+     * - `'start'` — the band sticks to the main axis line (bottom for an X axis,
+     *   left for a left Y axis, right for a right Y axis).
+     * - `'end'` — the band sticks to the opposite side of the plot area.
+     *
+     * Has no effect without `size`.
+     * @default 'start'
+     */
+    align?: PlotBandAlign;
+    /**
+     * Perpendicular extent of the band.
+     *
+     * Accepts a pixel number (`40`), a pixel string (`"40px"`), or a percentage of
+     * the perpendicular plot extent (`"25%"`). When omitted, the band spans the
+     * full perpendicular extent of the plot area (default behavior).
+     */
+    size?: number | string;
 }
 export interface AxisCrosshair extends Pick<AxisPlotLine, 'color' | 'dashStyle' | 'opacity' | 'layerPlacement' | 'width'> {
     /**