@gravity-ui/charts 1.47.0 → 1.48.0

package/dist/cjs/components/AxisX/prepare-axis-data.js

@@ -1,6 +1,6 @@
 import { getUniqId } from '@gravity-ui/uikit';
 import { select } from 'd3-selection';
-import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
+import { calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, } from '../../core/utils';
 import { getXAxisTickValues } from '../../core/utils/axis/x-axis';
 import { getMultilineTitleContentRows } from '../utils/axis-title';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWidth, axisWidth, boundsOffsetLeft, boundsOffsetRight, }) {
@@ -72,7 +72,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxWid
     return svgLabel;
 }
 export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRight, boundsWidth, height, scale, series, split, yAxis, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const xAxisItems = [];
     const splitPlots = (_a = split === null || split === void 0 ? void 0 : split.plots) !== null && _a !== void 0 ? _a : [];
     for (let plotIndex = 0; plotIndex < splitPlots.length; plotIndex++) {
@@ -267,6 +267,9 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             if (plotBandWidth < 0) {
                 continue;
             }
+            const perpExtent = (_g = calculateNumericProperty({ value: plotBand.size, base: axisHeight })) !== null && _g !== void 0 ? _g : axisHeight;
+            // X axis is positioned at the bottom of the plot area, so 'start' = bottom edge.
+            const bandY = plotBand.align === 'end' ? axisTop : axisTop + axisHeight - perpExtent;
             const getPlotLabelSize = getTextSizeFn({ style: plotBand.label.style });
             const labelSize = plotBand.label.text
                 ? await getPlotLabelSize(plotBand.label.text)
@@ -274,17 +277,17 @@ export async function prepareXAxisData({ axis, boundsOffsetLeft, boundsOffsetRig
             plotBands.push({
                 layerPlacement: plotBand.layerPlacement,
                 x: Math.max(0, startPos),
-                y: axisTop,
+                y: bandY,
                 width: plotBandWidth,
-                height: axisHeight,
+                height: perpExtent,
                 color: plotBand.color,
                 opacity: plotBand.opacity,
                 label: plotBand.label.text
                     ? {
                         text: plotBand.label.text,
                         style: plotBand.label.style,
-                        x: plotBand.label.padding + ((_g = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _g !== void 0 ? _g : 0),
-                        y: plotBand.label.padding + ((_h = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _h !== void 0 ? _h : 0),
+                        x: plotBand.label.padding + ((_h = labelSize === null || labelSize === void 0 ? void 0 : labelSize.hangingOffset) !== null && _h !== void 0 ? _h : 0),
+                        y: plotBand.label.padding + ((_j = labelSize === null || labelSize === void 0 ? void 0 : labelSize.width) !== null && _j !== void 0 ? _j : 0),
                         rotate: -90,
                         qa: plotBand.label.qa,
                     }

package/dist/cjs/components/AxisY/prepare-axis-data.js

@@ -1,6 +1,6 @@
 import { getUniqId } from '@gravity-ui/uikit';
 import { select } from 'd3-selection';
-import { calculateCos, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../core/utils';
+import { calculateCos, calculateNumericProperty, calculateSin, formatAxisTickLabel, getBandsPosition, getLabelsSize, getMinSpaceBetween, getTextSizeFn, getTextWithElipsis, wrapText, } from '../../core/utils';
 import { prepareHtmlYAxisTitle, prepareSvgYAxisTitle } from './prepare-axis-title';
 import { getTickValues } from './utils';
 async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHeight, topOffset, }) {
@@ -113,7 +113,7 @@ async function getSvgAxisLabel({ getTextSize, text, axis, top, left, labelMaxHei
     return svgLabel;
 }
 export async function prepareYAxisData({ axis, split, scale, top: topOffset, width, height, series, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const axisPlotTopPosition = ((_a = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _a === void 0 ? void 0 : _a.top) || 0;
     const axisHeight = ((_b = split === null || split === void 0 ? void 0 : split.plots[axis.plotIndex]) === null || _b === void 0 ? void 0 : _b.height) || height;
     const domainX = axis.position === 'left' ? 0 : width;
@@ -231,11 +231,18 @@ export async function prepareYAxisData({ axis, split, scale, top: topOffset, wid
         if (plotBandHeight < 0) {
             continue;
         }
+        const perpExtent = (_f = calculateNumericProperty({ value: plotBand.size, base: width })) !== null && _f !== void 0 ? _f : width;
+        // 'start' = at the main Y axis line. For a left axis that's x=0;
+        // for a right axis that's x = width - perpExtent. 'end' is mirrored.
+        const isLeftAxis = axis.position === 'left';
+        const atMainAxis = isLeftAxis ? 0 : width - perpExtent;
+        const atOpposite = isLeftAxis ? width - perpExtent : 0;
+        const bandX = plotBand.align === 'end' ? atOpposite : atMainAxis;
         const plotBandItem = {
             layerPlacement: plotBand.layerPlacement,
-            x: 0,
+            x: bandX,
             y: axisPlotTopPosition + top,
-            width,
+            width: perpExtent,
             height: plotBandHeight,
             color: plotBand.color,
             opacity: plotBand.opacity,

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/core/shapes/area/prepare-data.js

@@ -3,8 +3,7 @@ import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 import { prepareAnnotation } from '../../series/prepare-annotation';
 import { getXValue, getYValue, markHiddenPointsOutOfYRange } from '../../shapes/utils';
-import { getDataCategoryValue, getLabelsSize, getTextSizeFn } from '../../utils';
-import { getFormattedValue } from '../../utils/format';
+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;
@@ -340,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/cjs/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/cjs/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 { filterOverlappingLabels, preparePointDataLabels } from '../../utils';
 import { getXValue, getYValue, markHiddenPointsOutOfYRange } 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,
-    };
-}
 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());
@@ -148,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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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'> {
     /**

package/dist/cjs/core/types/chart/scatter.d.ts

@@ -23,6 +23,8 @@ export interface ScatterSeriesData<T = MeaningfulAny> extends BaseSeriesData<T>
      * @deprecated use `x` or `y` instead
      */
     category?: string;
+    /** Data label value of the point. If not specified, the y value is used. */
+    label?: string | number;
     /** Individual radius for the point. */
     radius?: number;
     /** Individual opacity for the point. */