feat(scatter): add dataLabels to scatter series

src/__stories__/Scatter/Scatter.stories.tsx

@@ -2,7 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {Chart} from '../../components';
 import {ChartStory} from '../ChartStory';
-import {scatterBasicData, scatterPlaygroundData} from '../__data__';
+import {scatterBasicData, scatterDataLabelsData, scatterPlaygroundData} from '../__data__';
 import {scatterContinuousLegendData} from '../__data__/scatter/continuous-legend';
 
 const meta: Meta<typeof Chart> = {
@@ -30,6 +30,13 @@ export const ScatterContinuousLegend = {
     },
 } satisfies Story;
 
+export const ScatterDataLabels = {
+    name: 'Data labels',
+    args: {
+        data: scatterDataLabelsData,
+    },
+} satisfies Story;
+
 export const ScatterPlayground = {
     name: 'Playground',
     args: {

src/__stories__/__data__/scatter/data-labels.ts

@@ -0,0 +1,40 @@
+import type {ChartData, ScatterSeries} from '../../../types';
+
+function prepareData(): ChartData {
+    return {
+        series: {
+            data: [
+                {
+                    type: 'scatter',
+                    name: 'Series 1',
+                    data: [
+                        {x: 1, y: 10, label: 'A (10)'},
+                        {x: 2, y: 40, label: 'B (40)'},
+                        {x: 3, y: 25, label: 'C (25)'},
+                        {x: 4, y: 60, label: 'D (60)'},
+                        {x: 5, y: 15, label: 'E (15)'},
+                    ],
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+                {
+                    type: 'scatter',
+                    name: 'Series 2',
+                    data: [
+                        {x: 1, y: 50, label: 'F (50)'},
+                        {x: 2, y: 20, label: 'G (20)'},
+                        {x: 3, y: 70, label: 'H (70)'},
+                        {x: 4, y: 35, label: 'I (35)'},
+                        {x: 5, y: 55, label: 'J (55)'},
+                    ],
+                    dataLabels: {
+                        enabled: true,
+                    },
+                },
+            ] as ScatterSeries[],
+        },
+    };
+}
+
+export const scatterDataLabelsData = prepareData();

src/__stories__/__data__/scatter/index.ts

@@ -1,5 +1,6 @@
 export * from './basic';
 export * from './continuous-legend';
+export * from './data-labels';
 export * from './linear-x-axis';
 export * from './null-modes';
 export * from './playground';

src/__tests__/scatter-series.visual.test.tsx

@@ -8,6 +8,7 @@ import {ChartTestStory} from '../../playwright/components/ChartTestStory';
 import {
     scatterBasicData,
     scatterContinuousLegendData,
+    scatterDataLabelsData,
     scatterNullModeSkipLinearXData,
     scatterNullModeZeroLinearXData,
 } from '../__stories__/__data__';
@@ -175,4 +176,119 @@ test.describe('Scatter series', () => {
         const component = await mount(<ChartTestStory data={scatterNullModeZeroLinearXData} />);
         await expect(component.locator('svg')).toHaveScreenshot();
     });
+
+    test.describe('Data labels', () => {
+        test('Basic (two series)', async ({mount}) => {
+            const component = await mount(<ChartTestStory data={scatterDataLabelsData} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+
+        test('Positioning of extreme point dataLabels', async ({mount}) => {
+            const data: ChartData = {
+                series: {
+                    data: [
+                        {
+                            type: 'scatter',
+                            name: '',
+                            data: [
+                                {x: 0, y: 0, label: 'left-bottom'},
+                                {x: 0, y: 10, label: 'left-top'},
+                                {x: 10, y: 10, label: 'right-top'},
+                                {x: 10, y: 0, label: 'right-bottom'},
+                            ],
+                            dataLabels: {enabled: true},
+                        },
+                    ],
+                },
+                yAxis: [{maxPadding: 0}],
+                xAxis: {maxPadding: 0},
+            };
+            const component = await mount(<ChartTestStory data={data} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+
+        test('Custom label value via label field', async ({mount}) => {
+            const data: ChartData = {
+                series: {
+                    data: [
+                        {
+                            type: 'scatter',
+                            name: 'Series',
+                            data: [
+                                {x: 1, y: 10, label: 'alpha'},
+                                {x: 2, y: 20, label: 'beta'},
+                                {x: 3, y: 15, label: 'gamma'},
+                            ],
+                            dataLabels: {enabled: true},
+                        },
+                    ],
+                },
+            };
+            const component = await mount(<ChartTestStory data={data} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+
+        test('Html labels', async ({mount}) => {
+            const data: ChartData = {
+                series: {
+                    data: [
+                        {
+                            type: 'scatter',
+                            name: 'Series',
+                            data: [
+                                {x: 1, y: 10, label: '<b>A</b>'},
+                                {x: 2, y: 20, label: '<b>B</b>'},
+                                {x: 3, y: 15, label: '<b>C</b>'},
+                            ],
+                            dataLabels: {enabled: true, html: true},
+                        },
+                    ],
+                },
+            };
+            const component = await mount(<ChartTestStory data={data} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+
+        test('Overlapping labels hidden by default', async ({mount}) => {
+            const data: ChartData = {
+                series: {
+                    data: [
+                        {
+                            type: 'scatter',
+                            name: 'Series',
+                            data: [
+                                {x: 1, y: 10, label: 'close-1'},
+                                {x: 1.05, y: 10.5, label: 'close-2'},
+                                {x: 5, y: 50, label: 'far'},
+                            ],
+                            dataLabels: {enabled: true},
+                        },
+                    ],
+                },
+            };
+            const component = await mount(<ChartTestStory data={data} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+
+        test('allowOverlap shows all labels', async ({mount}) => {
+            const data: ChartData = {
+                series: {
+                    data: [
+                        {
+                            type: 'scatter',
+                            name: 'Series',
+                            data: [
+                                {x: 1, y: 10, label: 'close-1'},
+                                {x: 1.05, y: 10.5, label: 'close-2'},
+                                {x: 5, y: 50, label: 'far'},
+                            ],
+                            dataLabels: {enabled: true, allowOverlap: true},
+                        },
+                    ],
+                },
+            };
+            const component = await mount(<ChartTestStory data={data} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+    });
 });

src/core/series/prepare-scatter.ts

@@ -3,11 +3,15 @@ import get from 'lodash/get';
 import merge from 'lodash/merge';
 
 import type {ChartSeriesOptions, ScatterSeries, ScatterSeriesData} from '../../types';
-import {seriesRangeSliderOptionsDefaults} from '../constants';
+import {DEFAULT_DATALABELS_STYLE, seriesRangeSliderOptionsDefaults} from '../constants';
 import type {PointMarkerOptions} from '../types/chart/marker';
 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 type {PreparedLegend, PreparedScatterSeries} from './types';
 import {prepareLegendSymbol} from './utils';
 
@@ -84,6 +88,14 @@ export function prepareScatterSeries(args: PrepareScatterSeriesArgs): PreparedSc
                 itemText: s.legend?.itemText ?? name,
             },
             data: prepareSeriesData(s),
+            dataLabels: {
+                enabled: s.dataLabels?.enabled || false,
+                style: Object.assign({}, DEFAULT_DATALABELS_STYLE, s.dataLabels?.style),
+                padding: get(s, 'dataLabels.padding', DEFAULT_DATALABELS_PADDING),
+                allowOverlap: get(s, 'dataLabels.allowOverlap', false),
+                html: get(s, 'dataLabels.html', false),
+                format: s.dataLabels?.format,
+            },
             marker: prepareMarker(s, seriesOptions, index),
             cursor: get(s, 'cursor', null),
             yAxis: get(s, 'yAxis', 0),

src/core/series/types.ts

@@ -153,6 +153,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: {

src/core/shapes/area/prepare-data.ts

@@ -3,15 +3,14 @@ import type {ScaleLogarithmic} from 'd3-scale';
 import isNil from 'lodash/isNil';
 import round from 'lodash/round';
 
-import type {AreaSeriesData, HtmlItem, LabelData} from '../../../types';
+import type {AreaSeriesData} from '../../../types';
 import type {PreparedXAxis, PreparedYAxis} from '../../axes/types';
 import type {PreparedSplit} from '../../layout/split-types';
 import type {ChartScale} from '../../scales/types';
 import {prepareAnnotation} from '../../series/prepare-annotation';
 import type {AnnotationAnchor, PreparedAreaSeries, PreparedSeriesOptions} from '../../series/types';
 import {getXValue, getYValue, markHiddenPointsOutOfYRange} from '../../shapes/utils';
-import {getDataCategoryValue, getLabelsSize, getTextSizeFn} from '../../utils';
-import {getFormattedValue} from '../../utils/format';
+import {getDataCategoryValue, preparePointDataLabels} from '../../utils';
 
 import type {MarkerData, MarkerPointData, PointData, PreparedAreaData} from './types';
 
@@ -46,75 +45,6 @@ function getXValues(series: PreparedAreaSeries[], xAxis: PreparedXAxis, xScale:
     return sort(Array.from(xValues), (d) => d[1]);
 }
 
-async function prepareDataLabels({
-    series,
-    points,
-    xMax,
-    yAxisTop,
-    isOutsideBounds,
-}: {
-    series: PreparedAreaSeries;
-    points: PointData[];
-    xMax: number;
-    yAxisTop: number;
-    isOutsideBounds: (x: number, y: number) => boolean;
-}) {
-    const svgLabels: LabelData[] = [];
-    const htmlLabels: HtmlItem[] = [];
-
-    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({
-            value: point.data.label ?? 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: {
     series: PreparedAreaSeries[];
     seriesOptions?: PreparedSeriesOptions;
@@ -454,7 +384,7 @@ export const prepareAreaData = async (args: {
                 const itemYAxisTop = split.plots[currentYAxis.plotIndex]?.top || 0;
 
                 if (item.series.dataLabels.enabled && !isRangeSlider) {
-                    const labelsData = await prepareDataLabels({
+                    const labelsData = await preparePointDataLabels({
                         series: item.series,
                         points: item.points,
                         xMax,