fix: line series dataLabels position

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

@@ -97,4 +97,30 @@ test.describe('Line series', () => {
         const component = await mount(<ChartTestStory data={lineNullModeZeroLinearXData} />);
         await expect(component.locator('svg')).toHaveScreenshot();
     });
+
+    test.describe('Data labels', () => {
+        test('Positioning of extreme point dataLabels', async ({mount}) => {
+            const chartData: ChartData = {
+                series: {
+                    data: [
+                        {
+                            name: '',
+                            type: 'line',
+                            data: [
+                                {x: 0, y: 0, label: 'left-bottom'},
+                                {y: 10, x: 0, label: 'left-top'},
+                                {y: 10, x: 10, label: 'right-top'},
+                                {y: 0, x: 10, label: 'right-bottom'},
+                            ],
+                            dataLabels: {enabled: true},
+                        },
+                    ],
+                },
+                yAxis: [{maxPadding: 0}],
+                xAxis: {maxPadding: 0},
+            };
+            const component = await mount(<ChartTestStory data={chartData} />);
+            await expect(component.locator('svg')).toHaveScreenshot();
+        });
+    });
 });

src/hooks/useShapes/line/prepare-data.ts

@@ -1,5 +1,5 @@
 import type {HtmlItem, LabelData} from '../../../types';
-import {getLabelsSize, getLeftPosition} from '../../../utils';
+import {getLabelsSize, getTextSizeFn} from '../../../utils';
 import {getFormattedValue} from '../../../utils/chart/format';
 import type {PreparedXAxis, PreparedYAxis} from '../../useAxis/types';
 import type {ChartScale} from '../../useAxisScales';
@@ -9,38 +9,6 @@ import {getXValue, getYValue} from '../utils';
 
 import type {MarkerData, MarkerPointData, PreparedLineData} from './types';
 
-async function getLabelData(point: MarkerPointData, series: PreparedLineSeries, xMax: number) {
-    const text = getFormattedValue({
-        value: point.data.label || point.data.y,
-        ...series.dataLabels,
-    });
-    const style = series.dataLabels.style;
-    const size = await getLabelsSize({labels: [text], style});
-
-    const labelData: LabelData = {
-        text,
-        x: point.x,
-        y: point.y - series.dataLabels.padding,
-        style,
-        size: {width: size.maxWidth, height: size.maxHeight},
-        textAnchor: 'middle',
-        series: series,
-        active: true,
-    };
-
-    const left = getLeftPosition(labelData);
-    if (left < 0) {
-        labelData.x = labelData.x + Math.abs(left);
-    } else {
-        const right = left + labelData.size.width;
-        if (right > xMax) {
-            labelData.x = labelData.x - xMax - right;
-        }
-    }
-
-    return labelData;
-}
-
 async function getHtmlLabel(
     point: MarkerPointData,
     series: PreparedLineSeries,
@@ -99,7 +67,7 @@ export const prepareLineData = async (args: {
         });
 
         const htmlElements: HtmlItem[] = [];
-        let labels: LabelData[] = [];
+        const labels: LabelData[] = [];
         if (s.dataLabels.enabled) {
             if (s.dataLabels.html) {
                 const list = await Promise.all(
@@ -113,15 +81,40 @@ export const prepareLineData = async (args: {
                 );
                 htmlElements.push(...list);
             } else {
-                labels = await Promise.all(
-                    points.reduce<Promise<LabelData>[]>((result, p) => {
-                        if (p.y === null) {
-                            return result;
-                        }
-                        result.push(getLabelData(p as MarkerPointData, s, xMax));
-                        return result;
-                    }, []),
-                );
+                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) {
+                        const text = getFormattedValue({
+                            value: point.data.label || point.data.y,
+                            ...s.dataLabels,
+                        });
+                        const labelSize = await getTextSize(text);
+
+                        const style = s.dataLabels.style;
+
+                        const y = Math.max(
+                            yAxisTop,
+                            point.y - s.dataLabels.padding - labelSize.height,
+                        );
+                        const x = Math.min(
+                            xMax - labelSize.width,
+                            Math.max(0, point.x - labelSize.width / 2),
+                        );
+                        const labelData: LabelData = {
+                            text,
+                            x,
+                            y,
+                            style,
+                            size: labelSize,
+                            textAnchor: 'start',
+                            series: s,
+                            active: true,
+                        };
+
+                        labels.push(labelData);
+                    }
+                }
             }
         }
 

src/hooks/useShapes/styles.scss

@@ -1,3 +1,9 @@
+.gcharts-line {
+    &__label {
+        dominant-baseline: text-before-edge;
+    }
+}
+
 .gcharts-scatter {
     &__point {
         stroke-width: 1px;