From c685202f6caa17d357da3b90c397d40eec121a2f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 28 Mar 2026 17:49:52 +0000
Subject: [PATCH 1/6] feat(xychart): add per-point text labels for line charts

Allow annotating individual data points on xychart line plots with
custom text labels. The syntax extends the existing data array format:

  line [540 "PaLM", 65 "LLaMA", 34 "Llama 2", 7 "Mistral"]

Each number can optionally be followed by a quoted string label.
Labels are rendered above (vertical) or to the right (horizontal)
of the data point, using the line's stroke color.

Backward-compatible: existing syntax without labels works unchanged.

Addresses mermaid-js/mermaid#5326.

https://claude.ai/code/session_01CgvREhkQ3tVYCagq1mHmjV
---
 demos/xychart.html                            |  20 ++
 .../chartBuilder/components/plot/linePlot.ts  |  52 ++++-
 .../xychart/chartBuilder/interfaces.ts        |   1 +
 .../src/diagrams/xychart/parser/xychart.jison |  13 +-
 .../xychart/parser/xychart.jison.spec.ts      | 188 +++++++++++++-----
 .../mermaid/src/diagrams/xychart/xychartDb.ts |  18 +-
 6 files changed, 232 insertions(+), 60 deletions(-)

diff --git a/demos/xychart.html b/demos/xychart.html
index 570c8114b3c..bfc22c351e8 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -316,6 +316,26 @@ <h1>XY Charts demos with all theme config</h1>
     </pre>
     <hr />
 
+    <hr />
+    <h1>Line chart with point labels</h1>
+    <pre class="mermaid">
+    xychart
+      title "Smallest AI models scoring above 60% on MMLU"
+      x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+      y-axis "Parameters (B)" 0 --> 600
+      line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+    </pre>
+
+    <hr />
+    <h1>Line chart with mixed labels (some points labeled, some not)</h1>
+    <pre class="mermaid">
+    xychart
+      title "Quarterly Performance"
+      x-axis [Q1, Q2, Q3, Q4]
+      y-axis "Revenue ($M)" 0 --> 100
+      line [25 "Launch", 45, 72, 90 "Target Hit"]
+    </pre>
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
index d8d0666de30..75e2a9632c5 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
@@ -1,5 +1,5 @@
 import { line } from 'd3';
-import type { DrawableElem, LinePlotData, XYChartConfig } from '../../interfaces.js';
+import type { DrawableElem, LinePlotData, TextElem, XYChartConfig } from '../../interfaces.js';
 import type { Axis } from '../axis/index.js';
 
 export class LinePlot {
@@ -30,7 +30,8 @@ export class LinePlot {
     if (!path) {
       return [];
     }
-    return [
+
+    const elements: DrawableElem[] = [
       {
         groupTexts: ['plot', `line-plot-${this.plotIndex}`],
         type: 'path',
@@ -43,5 +44,52 @@ export class LinePlot {
         ],
       },
     ];
+
+    if (this.plotData.pointLabels && this.plotData.pointLabels.length > 0) {
+      const labelOffset = 10;
+      const fontSize = 12;
+      const textData: TextElem[] = [];
+
+      for (const [i, [px, py]] of finalData.entries()) {
+        const label = this.plotData.pointLabels[i];
+        if (!label) {
+          continue;
+        }
+
+        if (this.orientation === 'horizontal') {
+          textData.push({
+            x: py + labelOffset,
+            y: px,
+            text: label,
+            fill: this.plotData.strokeFill,
+            verticalPos: 'middle',
+            horizontalPos: 'left',
+            fontSize,
+            rotation: 0,
+          });
+        } else {
+          textData.push({
+            x: px,
+            y: py - labelOffset,
+            text: label,
+            fill: this.plotData.strokeFill,
+            verticalPos: 'middle',
+            horizontalPos: 'center',
+            fontSize,
+            rotation: 0,
+          });
+        }
+      }
+
+      if (textData.length > 0) {
+        elements.push({
+          groupTexts: ['plot', `line-plot-${this.plotIndex}`, 'labels'],
+          type: 'text',
+          data: textData,
+        });
+      }
+    }
+
+    return elements;
   }
 }
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
index 7ba4318d154..3cb0f91c857 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
@@ -33,6 +33,7 @@ export interface LinePlotData {
   strokeFill: string;
   strokeWidth: number;
   data: SimplePlotDataType;
+  pointLabels?: string[];
 }
 
 export interface BarPlotData {
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
index 023c5abdbc4..36349a40cbd 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
@@ -111,12 +111,17 @@ statement
   ;
 
 plotData
-  : SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END   { $$ = $commaSeparatedNumbers }
+  : SQUARE_BRACES_START dataPoints SQUARE_BRACES_END   { $$ = $dataPoints }
   ;
 
-commaSeparatedNumbers
-  : NUMBER_WITH_DECIMAL COMMA commaSeparatedNumbers                { $$ = [Number($NUMBER_WITH_DECIMAL), ...$commaSeparatedNumbers] }
-  | NUMBER_WITH_DECIMAL                                           { $$ = [Number($NUMBER_WITH_DECIMAL)] }
+dataPoints
+  : dataPoint COMMA dataPoints                { $$ = [$dataPoint, ...$dataPoints] }
+  | dataPoint                                 { $$ = [$dataPoint] }
+  ;
+
+dataPoint
+  : NUMBER_WITH_DECIMAL STR                   { $$ = { value: Number($1), label: $2 } }
+  | NUMBER_WITH_DECIMAL                       { $$ = { value: Number($1), label: '' } }
   ;
 
 parseXAxis
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
index 693175ae6fb..9081f1b702b 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -29,6 +29,11 @@ function clearMocks() {
   }
 }
 
+/** Helper to create the expected parsed data point format */
+function dp(value: number, label = '') {
+  return { value, label };
+}
+
 describe('Testing xychart jison file', () => {
   beforeEach(() => {
     parser.yy = mockDB;
@@ -274,10 +279,11 @@ describe('Testing xychart jison file', () => {
   it('parse line Data', () => {
     const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
     expect(parserFnConstructor(str)).not.toThrow();
-    expect(mockDB.setLineData).toHaveBeenCalledWith(
-      { text: 'lineTitle', type: 'text' },
-      [23, 45, 56.6]
-    );
+    expect(mockDB.setLineData).toHaveBeenCalledWith({ text: 'lineTitle', type: 'text' }, [
+      dp(23),
+      dp(45),
+      dp(56.6),
+    ]);
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
     expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
   });
@@ -289,7 +295,7 @@ describe('Testing xychart jison file', () => {
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
     expect(mockDB.setLineData).toHaveBeenCalledWith(
       { text: 'lineTitle with space', type: 'text' },
-      [23, -45, 56.6]
+      [dp(23), dp(-45), dp(56.6)]
     );
   });
   it('parse line Data without title', () => {
@@ -297,10 +303,12 @@ describe('Testing xychart jison file', () => {
     expect(parserFnConstructor(str)).not.toThrow();
     expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
-    expect(mockDB.setLineData).toHaveBeenCalledWith(
-      { text: '', type: 'text' },
-      [23, -45, 56.6, 0.33]
-    );
+    expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+      dp(23),
+      dp(-45),
+      dp(56.6),
+      dp(0.33),
+    ]);
   });
   it('parse line Data throws error unbalanced brackets', () => {
     let str =
@@ -333,10 +341,12 @@ describe('Testing xychart jison file', () => {
     expect(parserFnConstructor(str)).not.toThrow();
     expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
-      { text: 'barTitle', type: 'text' },
-      [23, 45, 56.6, 0.22]
-    );
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: 'barTitle', type: 'text' }, [
+      dp(23),
+      dp(45),
+      dp(56.6),
+      dp(0.22),
+    ]);
   });
   it('parse bar Data spaces and +,- symbol', () => {
     const str =
@@ -344,17 +354,22 @@ describe('Testing xychart jison file', () => {
     expect(parserFnConstructor(str)).not.toThrow();
     expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
-      { text: 'barTitle with space', type: 'text' },
-      [23, -45, 56.6]
-    );
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: 'barTitle with space', type: 'text' }, [
+      dp(23),
+      dp(-45),
+      dp(56.6),
+    ]);
   });
   it('parse bar Data without plot title', () => {
     const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar   [  +23 , -45  , 56.6 ]   ';
     expect(parserFnConstructor(str)).not.toThrow();
     expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
-    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+      dp(23),
+      dp(-45),
+      dp(56.6),
+    ]);
   });
   it('parse bar should throw for unbalanced brackets', () => {
     let str =
@@ -389,22 +404,27 @@ describe('Testing xychart jison file', () => {
     expect(parserFnConstructor(str)).not.toThrow();
     expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
     expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
-      { text: 'barTitle1', type: 'text' },
-      [23, 45, 56.6]
-    );
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
-      { text: 'barTitle2', type: 'text' },
-      [13, 42, 56.89]
-    );
-    expect(mockDB.setLineData).toHaveBeenCalledWith(
-      { text: 'lineTitle1', type: 'text' },
-      [11, 45.5, 67, 23]
-    );
-    expect(mockDB.setLineData).toHaveBeenCalledWith(
-      { text: 'lineTitle2', type: 'text' },
-      [45, 99, 12]
-    );
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: 'barTitle1', type: 'text' }, [
+      dp(23),
+      dp(45),
+      dp(56.6),
+    ]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: 'barTitle2', type: 'text' }, [
+      dp(13),
+      dp(42),
+      dp(56.89),
+    ]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith({ text: 'lineTitle1', type: 'text' }, [
+      dp(11),
+      dp(45.5),
+      dp(67),
+      dp(23),
+    ]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith({ text: 'lineTitle2', type: 'text' }, [
+      dp(45),
+      dp(99),
+      dp(12),
+    ]);
   });
   it('parse multiple bar and line variant 2', () => {
     const str = `
@@ -425,22 +445,90 @@ describe('Testing xychart jison file', () => {
       { text: 'category 2', type: 'text' },
       { text: 'category3', type: 'text' },
     ]);
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
-      { text: 'barTitle1', type: 'text' },
-      [23, 45, 56.6]
-    );
-    expect(mockDB.setBarData).toHaveBeenCalledWith(
-      { text: 'barTitle2', type: 'text' },
-      [13, 42, 56.89]
-    );
-    expect(mockDB.setLineData).toHaveBeenCalledWith(
-      { text: 'lineTitle1', type: 'text' },
-      [11, 45.5, 67, 23]
-    );
-    expect(mockDB.setLineData).toHaveBeenCalledWith(
-      { text: 'lineTitle2', type: 'text' },
-      [45, 99, 12]
-    );
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: 'barTitle1', type: 'text' }, [
+      dp(23),
+      dp(45),
+      dp(56.6),
+    ]);
+    expect(mockDB.setBarData).toHaveBeenCalledWith({ text: 'barTitle2', type: 'text' }, [
+      dp(13),
+      dp(42),
+      dp(56.89),
+    ]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith({ text: 'lineTitle1', type: 'text' }, [
+      dp(11),
+      dp(45.5),
+      dp(67),
+      dp(23),
+    ]);
+    expect(mockDB.setLineData).toHaveBeenCalledWith({ text: 'lineTitle2', type: 'text' }, [
+      dp(45),
+      dp(99),
+      dp(12),
+    ]);
+  });
+
+  describe('point labels', () => {
+    it('parse line data with point labels', () => {
+      const str =
+        'xychart\nx-axis xAxisName\ny-axis yAxisName\n line [10 "First", 20 "Second", 30 "Third"]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+        dp(10, 'First'),
+        dp(20, 'Second'),
+        dp(30, 'Third'),
+      ]);
+    });
+
+    it('parse line data with mixed labels and no labels', () => {
+      const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line [10 "Start", 20, 30 "End"]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+        dp(10, 'Start'),
+        dp(20),
+        dp(30, 'End'),
+      ]);
+    });
+
+    it('parse line data with labels containing spaces', () => {
+      const str =
+        'xychart\nx-axis xAxisName\ny-axis yAxisName\n line [10 "Hello World", 20 "Another Label"]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+        dp(10, 'Hello World'),
+        dp(20, 'Another Label'),
+      ]);
+    });
+
+    it('parse line data with title and point labels', () => {
+      const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n line "My Line" [10 "A", 20 "B"]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setLineData).toHaveBeenCalledWith({ text: 'My Line', type: 'text' }, [
+        dp(10, 'A'),
+        dp(20, 'B'),
+      ]);
+    });
+
+    it('parse bar data with point labels', () => {
+      const str = 'xychart\nx-axis xAxisName\ny-axis yAxisName\n bar [10 "A", 20 "B", 30 "C"]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+        dp(10, 'A'),
+        dp(20, 'B'),
+        dp(30, 'C'),
+      ]);
+    });
+
+    it('parse line data with decimal values and labels', () => {
+      const str =
+        'xychart\nx-axis xAxisName\ny-axis yAxisName\n line [3.8 "Phi-3", 7 "Mistral", 540 "PaLM"]';
+      expect(parserFnConstructor(str)).not.toThrow();
+      expect(mockDB.setLineData).toHaveBeenCalledWith({ text: '', type: 'text' }, [
+        dp(3.8, 'Phi-3'),
+        dp(7, 'Mistral'),
+        dp(540, 'PaLM'),
+      ]);
+    });
   });
 
   describe('accessibility', () => {
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index 9ad7cd420cf..215ef1e313b 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -158,19 +158,29 @@ function getPlotColorFromPalette(plotIndex: number): string {
   return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % plotColorPalette.length];
 }
 
-function setLineData(title: NormalTextType, data: number[]) {
-  const plotData = transformDataWithoutCategory(data);
+interface ParsedDataPoint {
+  value: number;
+  label: string;
+}
+
+function setLineData(title: NormalTextType, data: ParsedDataPoint[]) {
+  const values = data.map((d) => d.value);
+  const labels = data.map((d) => d.label);
+  const plotData = transformDataWithoutCategory(values);
+  const hasAnyLabel = labels.some((l) => l !== '');
   xyChartData.plots.push({
     type: 'line',
     strokeFill: getPlotColorFromPalette(plotIndex),
     strokeWidth: 2,
     data: plotData,
+    ...(hasAnyLabel ? { pointLabels: labels } : {}),
   });
   plotIndex++;
 }
 
-function setBarData(title: NormalTextType, data: number[]) {
-  const plotData = transformDataWithoutCategory(data);
+function setBarData(title: NormalTextType, data: ParsedDataPoint[]) {
+  const values = data.map((d) => d.value);
+  const plotData = transformDataWithoutCategory(values);
   xyChartData.plots.push({
     type: 'bar',
     fill: getPlotColorFromPalette(plotIndex),

From 00bbfabfe9ffc9013b15bc69ba36e6feae031721 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 29 Mar 2026 12:58:00 +0000
Subject: [PATCH 2/6] docs(xychart): add per-point text labels documentation

Document the new per-point text label syntax for line charts,
including syntax examples and rendering behavior notes.

https://claude.ai/code/session_01WErEVQAYaNmC3rpbevFwMg
---
 packages/mermaid/src/docs/syntax/xyChart.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 66ddc713f03..396ae3d51f9 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -211,6 +211,26 @@ xychart
     bar [12,2,20,25,17,24]
 ```
 
+## Per-point text labels for line charts (v<MERMAID_RELEASE_VERSION>+)
+
+Each data point in a `line` can optionally include a quoted string label after the numeric value. Labels render above points in vertical orientation, or to the right in horizontal orientation, using the line's stroke color.
+
+```mermaid-example
+xychart
+    title "Smallest AI models scoring above 60% on MMLU"
+    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+    y-axis "Parameters (B)" 0 --> 600
+    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+```
+
+Labels are optional per point — you can mix labeled and unlabeled values:
+
+```
+line [10 "Start", 20, 30 "End"]
+```
+
+Existing syntax without labels continues to work unchanged.
+
 ## Example on config and theme
 
 ```mermaid-example

From 15b95539a5ca67b81c2d959ef4252bd611ad1da3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 29 Mar 2026 13:07:13 +0000
Subject: [PATCH 3/6] docs(xychart): add changeset, documentation, and e2e
 tests for point labels

- Add minor changeset for the new point labels feature
- Enhance xyChart.md docs with mermaid-example block for mixed labels
  and a note about fixed font size
- Add 4 Cypress e2e snapshot tests covering: all-labeled, mixed-labels,
  horizontal orientation, and multi-line scenarios
- Add MMLU to cspell dictionary

https://claude.ai/code/session_011g3A6y2kdJnZh8YB4uJaxD
---
 .changeset/add-xychart-point-labels.md        |  5 ++
 .cspell/misc-terms.txt                        |  1 +
 cypress/integration/rendering/xyChart.spec.js | 53 +++++++++++++++++++
 docs/syntax/xyChart.md                        | 43 +++++++++++++++
 packages/mermaid/src/docs/syntax/xyChart.md   | 12 ++++-
 5 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/add-xychart-point-labels.md

diff --git a/.changeset/add-xychart-point-labels.md b/.changeset/add-xychart-point-labels.md
new file mode 100644
index 00000000000..13a9d7df6b3
--- /dev/null
+++ b/.changeset/add-xychart-point-labels.md
@@ -0,0 +1,5 @@
+---
+'mermaid': minor
+---
+
+feat: add per-point text labels for xychart line plots
diff --git a/.cspell/misc-terms.txt b/.cspell/misc-terms.txt
index 2906a02fa25..5def7b7ccab 100644
--- a/.cspell/misc-terms.txt
+++ b/.cspell/misc-terms.txt
@@ -3,6 +3,7 @@ Buzan
 circo
 handDrawn
 KOEPF
+MMLU
 neato
 newbranch
 validify
diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js
index 32a4f34984a..2ca41883b95 100644
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -879,4 +879,57 @@ describe('XY Chart', () => {
       });
     });
   });
+
+  it('should render a line chart with point labels', () => {
+    imgSnapshotTest(
+      `
+      xychart
+        title "Smallest AI models scoring above 60% on MMLU"
+        x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+        y-axis "Parameters (B)" 0 --> 600
+        line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+      `,
+      {}
+    );
+  });
+
+  it('should render a line chart with mixed labels (some points labeled, some not)', () => {
+    imgSnapshotTest(
+      `
+      xychart
+        title "Quarterly Performance"
+        x-axis [Q1, Q2, Q3, Q4]
+        y-axis "Revenue ($M)" 0 --> 100
+        line [25 "Launch", 45, 72, 90 "Target Hit"]
+      `,
+      {}
+    );
+  });
+
+  it('should render a horizontal line chart with point labels', () => {
+    imgSnapshotTest(
+      `
+      xychart horizontal
+        title "Model Sizes"
+        x-axis ["Model A", "Model B", "Model C"]
+        y-axis "Parameters" 0 --> 100
+        line [20 "Small", 50 "Medium", 90 "Large"]
+      `,
+      {}
+    );
+  });
+
+  it('should render multiple lines where only one has labels', () => {
+    imgSnapshotTest(
+      `
+      xychart
+        title "Comparison"
+        x-axis [Q1, Q2, Q3, Q4]
+        y-axis "Value" 0 --> 100
+        line [20, 40, 60, 80]
+        line [30 "Start", 50, 70, 95 "Peak"]
+      `,
+      {}
+    );
+  });
 });
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 91a639b52bd..46d8c983aaa 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -271,6 +271,49 @@ xychart
     bar [12,2,20,25,17,24]
 ```
 
+## Per-point text labels for line charts (v\<MERMAID_RELEASE_VERSION>+)
+
+Each data point in a `line` can optionally include a quoted string label after the numeric value. Labels render above points in vertical orientation, or to the right in horizontal orientation, using the line's stroke color.
+
+```mermaid-example
+xychart
+    title "Smallest AI models scoring above 60% on MMLU"
+    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+    y-axis "Parameters (B)" 0 --> 600
+    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+```
+
+```mermaid
+xychart
+    title "Smallest AI models scoring above 60% on MMLU"
+    x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+    y-axis "Parameters (B)" 0 --> 600
+    line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+```
+
+Labels are optional per point — you can mix labeled and unlabeled values:
+
+```mermaid-example
+xychart
+    title "Quarterly Performance"
+    x-axis [Q1, Q2, Q3, Q4]
+    y-axis "Revenue ($M)" 0 --> 100
+    line [25 "Launch", 45, 72, 90 "Target Hit"]
+```
+
+```mermaid
+xychart
+    title "Quarterly Performance"
+    x-axis [Q1, Q2, Q3, Q4]
+    y-axis "Revenue ($M)" 0 --> 100
+    line [25 "Launch", 45, 72, 90 "Target Hit"]
+```
+
+Existing syntax without labels continues to work unchanged.
+
+> **Note**
+> Point labels use a fixed font size of 12px. In vertical charts, labels appear above each point. In horizontal charts, labels appear to the right.
+
 ## Example on config and theme
 
 ```mermaid-example
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 396ae3d51f9..74a5359e90b 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -225,12 +225,20 @@ xychart
 
 Labels are optional per point — you can mix labeled and unlabeled values:
 
-```
-line [10 "Start", 20, 30 "End"]
+```mermaid-example
+xychart
+    title "Quarterly Performance"
+    x-axis [Q1, Q2, Q3, Q4]
+    y-axis "Revenue ($M)" 0 --> 100
+    line [25 "Launch", 45, 72, 90 "Target Hit"]
 ```
 
 Existing syntax without labels continues to work unchanged.
 
+```note
+Point labels use a fixed font size of 12px. In vertical charts, labels appear above each point. In horizontal charts, labels appear to the right.
+```
+
 ## Example on config and theme
 
 ```mermaid-example

From da1b5eec65f86f269bb414f854bc06b0c144e7c8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 29 Mar 2026 11:20:24 +0000
Subject: [PATCH 4/6] fix(xychart): auto-flip point labels to avoid collision
 with line

When a line segment has a steep slope, labels placed above a data point
can collide with the line. This adds collision detection that estimates
each label's bounding box and checks for intersection with adjacent line
segments using y-range overlap. When a collision is detected, the label
is flipped to the opposite side of the point (below for vertical charts,
left for horizontal charts).

https://claude.ai/code/session_01UCV1QCaRsRtQjRspaVrqUp
---
 cypress/integration/rendering/xyChart.spec.js |  37 ++++
 demos/xychart.html                            |  19 ++
 .../chartBuilder/components/plot/linePlot.ts  | 179 +++++++++++++++++-
 3 files changed, 232 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js
index 2ca41883b95..ff144630dc5 100644
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -932,4 +932,41 @@ describe('XY Chart', () => {
       {}
     );
   });
+
+  describe('Point label collision avoidance', () => {
+    it('should flip labels below line when steep descent causes collision', () => {
+      imgSnapshotTest(
+        `
+        xychart
+          title "Smallest AI models scoring above 60% on MMLU"
+          x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+          y-axis "Parameters (B)" 0 --> 600
+          line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+        `,
+        {}
+      );
+    });
+    it('should keep labels above line when no collision on gentle slope', () => {
+      imgSnapshotTest(
+        `
+        xychart
+          x-axis ["A", "B", "C"]
+          y-axis 0 --> 100
+          line [40 "Start", 50 "Mid", 45 "End"]
+        `,
+        {}
+      );
+    });
+    it('should handle mixed collision: some labels above, some below', () => {
+      imgSnapshotTest(
+        `
+        xychart
+          x-axis ["P1", "P2", "P3", "P4"]
+          y-axis 0 --> 500
+          line [400 "High", 50 "Low", 450 "Peak", 30 "Bottom"]
+        `,
+        {}
+      );
+    });
+  });
 });
diff --git a/demos/xychart.html b/demos/xychart.html
index bfc22c351e8..27f005fff8f 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -336,6 +336,25 @@ <h1>Line chart with mixed labels (some points labeled, some not)</h1>
       line [25 "Launch", 45, 72, 90 "Target Hit"]
     </pre>
 
+    <hr />
+    <h1>Label collision avoidance: steep descent</h1>
+    <pre class="mermaid">
+    xychart
+      title "Smallest AI models scoring above 60% on MMLU"
+      x-axis "Date" ["Apr 2022", "Feb 2023", "Jul 2023", "Sep 2023", "Apr 2024"]
+      y-axis "Parameters (B)" 0 --> 600
+      line [540 "PaLM", 65 "LLaMA-65B", 34 "Llama 2 34B", 7 "Mistral 7B", 3.8 "Phi-3-mini"]
+    </pre>
+
+    <hr />
+    <h1>Label collision avoidance: zigzag pattern</h1>
+    <pre class="mermaid">
+    xychart
+      x-axis ["P1", "P2", "P3", "P4"]
+      y-axis 0 --> 500
+      line [400 "High", 50 "Low", 450 "Peak", 30 "Bottom"]
+    </pre>
+
     <script type="module">
       import mermaid from './mermaid.esm.mjs';
       mermaid.initialize({
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
index 75e2a9632c5..bfa19bf6aac 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
@@ -2,6 +2,177 @@ import { line } from 'd3';
 import type { DrawableElem, LinePlotData, TextElem, XYChartConfig } from '../../interfaces.js';
 import type { Axis } from '../axis/index.js';
 
+const CHAR_WIDTH_FACTOR = 0.7;
+
+/**
+ * Interpolate a line segment's y-value at a given x.
+ * Returns null if x is outside the segment's x-range.
+ */
+function lineYAtX(segStart: [number, number], segEnd: [number, number], x: number): number | null {
+  const [x0, y0] = segStart;
+  const [x1, y1] = segEnd;
+  const minX = Math.min(x0, x1);
+  const maxX = Math.max(x0, x1);
+  if (x < minX || x > maxX) {
+    return null;
+  }
+  if (x0 === x1) {
+    return null; // vertical segment — can't interpolate by x
+  }
+  const t = (x - x0) / (x1 - x0);
+  return y0 + t * (y1 - y0);
+}
+
+/**
+ * Check if a line segment passes through an axis-aligned bounding box.
+ *
+ * Computes the y-range of the segment within the box's x-range and checks
+ * if it overlaps with the box's y-range. This correctly detects the case
+ * where a steep line enters from above and exits below the box (or vice
+ * versa) even if neither endpoint nor any single sample point falls inside.
+ */
+function doesSegmentIntersectBox(
+  segStart: [number, number],
+  segEnd: [number, number],
+  boxLeft: number,
+  boxRight: number,
+  boxTop: number,
+  boxBottom: number
+): boolean {
+  // Check if either endpoint is inside the box
+  for (const [ex, ey] of [segStart, segEnd]) {
+    if (ex >= boxLeft && ex <= boxRight && ey >= boxTop && ey <= boxBottom) {
+      return true;
+    }
+  }
+
+  // Compute the y-values of the line at the box's left and right x-edges
+  const yAtLeft = lineYAtX(segStart, segEnd, boxLeft);
+  const yAtRight = lineYAtX(segStart, segEnd, boxRight);
+
+  // Collect valid y-values (where segment overlaps box's x-range)
+  const ys: number[] = [];
+  if (yAtLeft !== null) {
+    ys.push(yAtLeft);
+  }
+  if (yAtRight !== null) {
+    ys.push(yAtRight);
+  }
+
+  // Also include segment endpoints that fall within the box's x-range
+  for (const [ex, ey] of [segStart, segEnd]) {
+    if (ex >= boxLeft && ex <= boxRight) {
+      ys.push(ey);
+    }
+  }
+
+  if (ys.length === 0) {
+    return false;
+  }
+
+  // The segment's y-range within the box's x-range
+  const segMinY = Math.min(...ys);
+  const segMaxY = Math.max(...ys);
+
+  // Check if the segment's y-range overlaps with the box's y-range
+  return segMaxY >= boxTop && segMinY <= boxBottom;
+}
+
+/**
+ * Determine if a label placed above (vertical) or to the right (horizontal)
+ * of a data point would collide with an adjacent line segment.
+ */
+function shouldFlipLabelVertical(
+  finalData: [number, number][],
+  index: number,
+  labelText: string,
+  fontSize: number,
+  labelOffset: number
+): boolean {
+  const [px, py] = finalData[index];
+  const textWidth = fontSize * labelText.length * CHAR_WIDTH_FACTOR;
+  const halfWidth = textWidth / 2;
+  const halfHeight = fontSize / 2;
+
+  // Bounding box of label placed above the point
+  const boxLeft = px - halfWidth;
+  const boxRight = px + halfWidth;
+  const boxTop = py - labelOffset - halfHeight;
+  const boxBottom = py - labelOffset + halfHeight;
+
+  // Check previous segment
+  if (
+    index > 0 &&
+    doesSegmentIntersectBox(
+      finalData[index - 1],
+      finalData[index],
+      boxLeft,
+      boxRight,
+      boxTop,
+      boxBottom
+    )
+  ) {
+    return true;
+  }
+  // Check next segment
+  if (
+    index < finalData.length - 1 &&
+    doesSegmentIntersectBox(
+      finalData[index],
+      finalData[index + 1],
+      boxLeft,
+      boxRight,
+      boxTop,
+      boxBottom
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function shouldFlipLabelHorizontal(
+  finalData: [number, number][],
+  index: number,
+  labelText: string,
+  fontSize: number,
+  labelOffset: number
+): boolean {
+  // In horizontal orientation, finalData is still [xScaled, yScaled] but
+  // the path uses y(d[0]) and x(d[1]), so pixel positions are swapped.
+  // px = xAxis.getScaleValue (maps to SVG y), py = yAxis.getScaleValue (maps to SVG x)
+  // Label is placed at SVG (py + labelOffset, px) — to the right of the point.
+  // We check if that box collides with adjacent segments in SVG space.
+  const [px, py] = finalData[index];
+  const textWidth = fontSize * labelText.length * CHAR_WIDTH_FACTOR;
+  const halfHeight = fontSize / 2;
+
+  // In SVG space for horizontal: svgX = py, svgY = px
+  // Label "to the right": svgX = py + labelOffset, svgY = px
+  // Box in SVG coords:
+  const boxLeft = py + labelOffset;
+  const boxRight = py + labelOffset + textWidth;
+  const boxTop = px - halfHeight;
+  const boxBottom = px + halfHeight;
+
+  // Segments in SVG space: point i has svgX=py_i, svgY=px_i
+  const toSvg = (idx: number): [number, number] => [finalData[idx][1], finalData[idx][0]];
+
+  if (
+    index > 0 &&
+    doesSegmentIntersectBox(toSvg(index - 1), toSvg(index), boxLeft, boxRight, boxTop, boxBottom)
+  ) {
+    return true;
+  }
+  if (
+    index < finalData.length - 1 &&
+    doesSegmentIntersectBox(toSvg(index), toSvg(index + 1), boxLeft, boxRight, boxTop, boxBottom)
+  ) {
+    return true;
+  }
+  return false;
+}
+
 export class LinePlot {
   constructor(
     private plotData: LinePlotData,
@@ -57,20 +228,22 @@ export class LinePlot {
         }
 
         if (this.orientation === 'horizontal') {
+          const flip = shouldFlipLabelHorizontal(finalData, i, label, fontSize, labelOffset);
           textData.push({
-            x: py + labelOffset,
+            x: flip ? py - labelOffset : py + labelOffset,
             y: px,
             text: label,
             fill: this.plotData.strokeFill,
             verticalPos: 'middle',
-            horizontalPos: 'left',
+            horizontalPos: flip ? 'right' : 'left',
             fontSize,
             rotation: 0,
           });
         } else {
+          const flip = shouldFlipLabelVertical(finalData, i, label, fontSize, labelOffset);
           textData.push({
             x: px,
-            y: py - labelOffset,
+            y: flip ? py + labelOffset : py - labelOffset,
             text: label,
             fill: this.plotData.strokeFill,
             verticalPos: 'middle',

From b0777fcc9d1a9c994ec6f28cd84361a3f4a243c9 Mon Sep 17 00:00:00 2001
From: dominicburkart <code@dominic.computer>
Date: Mon, 30 Mar 2026 00:13:20 +0200
Subject: [PATCH 5/6] chore: add changeset for label-line collision fix

---
 .changeset/fix-xychart-label-line-collision.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fix-xychart-label-line-collision.md

diff --git a/.changeset/fix-xychart-label-line-collision.md b/.changeset/fix-xychart-label-line-collision.md
new file mode 100644
index 00000000000..3c055290665
--- /dev/null
+++ b/.changeset/fix-xychart-label-line-collision.md
@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: auto-flip xychart point labels to avoid collision with line on steep slopes

From b0f93a3c676203118673908621aa78312db3c0fb Mon Sep 17 00:00:00 2001
From: dominicburkart <code@dominic.computer>
Date: Sat, 4 Apr 2026 10:18:36 +0200
Subject: [PATCH 6/6] fix(xychart): check both label positions before flipping,
 add stroke padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace shouldFlipLabelVertical/Horizontal with computeLabelPlacement
  functions that verify both above and below positions before deciding
  where to place each point label
- Try increasing offsets (1x, 2x, 3x baseOffset) if both positions
  collide at the default offset — handles zigzag patterns
- Expand collision bounding boxes by strokeWidth/2 to account for the
  visual width of the rendered line
- Increase default labelOffset from 10 to 14 for more breathing room
- Add reviewer's exact failing example to e2e tests and demo page
---
 cypress/integration/rendering/xyChart.spec.js |  13 ++
 demos/xychart.html                            |  10 +
 .../chartBuilder/components/plot/linePlot.ts  | 180 +++++++++++-------
 3 files changed, 133 insertions(+), 70 deletions(-)

diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js
index ff144630dc5..54936cf88ff 100644
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -933,6 +933,19 @@ describe('XY Chart', () => {
     );
   });
 
+  it('should render reviewer example: label at 80 "target hit" does not collide with line', () => {
+    imgSnapshotTest(
+      `
+      xychart
+          title "Quarterly Performance"
+          x-axis [Q1, Q2, Q3, Q4]
+          y-axis "Revenue ($M)" 0 --> 100
+          line [25, 45, 80 "target hit", 90]
+      `,
+      {}
+    );
+  });
+
   describe('Point label collision avoidance', () => {
     it('should flip labels below line when steep descent causes collision', () => {
       imgSnapshotTest(
diff --git a/demos/xychart.html b/demos/xychart.html
index 27f005fff8f..da5c1fb27cf 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -336,6 +336,16 @@ <h1>Line chart with mixed labels (some points labeled, some not)</h1>
       line [25 "Launch", 45, 72, 90 "Target Hit"]
     </pre>
 
+    <hr />
+    <h1>Reviewer's failing example: label at 80 "target hit"</h1>
+    <pre class="mermaid">
+    xychart
+        title "Quarterly Performance"
+        x-axis [Q1, Q2, Q3, Q4]
+        y-axis "Revenue ($M)" 0 --> 100
+        line [25, 45, 80 "target hit", 90]
+    </pre>
+
     <hr />
     <h1>Label collision avoidance: steep descent</h1>
     <pre class="mermaid">
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
index bfa19bf6aac..ca7e216e2bc 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
@@ -79,98 +79,124 @@ function doesSegmentIntersectBox(
 }
 
 /**
- * Determine if a label placed above (vertical) or to the right (horizontal)
- * of a data point would collide with an adjacent line segment.
+ * Check whether either adjacent segment (prev→current or current→next) intersects
+ * the given bounding box. Points are provided in the coordinate system already
+ * expected by doesSegmentIntersectBox.
  */
-function shouldFlipLabelVertical(
-  finalData: [number, number][],
+function adjacentSegmentsIntersectBox(
+  points: [number, number][],
   index: number,
-  labelText: string,
-  fontSize: number,
-  labelOffset: number
+  boxLeft: number,
+  boxRight: number,
+  boxTop: number,
+  boxBottom: number
 ): boolean {
-  const [px, py] = finalData[index];
-  const textWidth = fontSize * labelText.length * CHAR_WIDTH_FACTOR;
-  const halfWidth = textWidth / 2;
-  const halfHeight = fontSize / 2;
-
-  // Bounding box of label placed above the point
-  const boxLeft = px - halfWidth;
-  const boxRight = px + halfWidth;
-  const boxTop = py - labelOffset - halfHeight;
-  const boxBottom = py - labelOffset + halfHeight;
-
-  // Check previous segment
   if (
     index > 0 &&
-    doesSegmentIntersectBox(
-      finalData[index - 1],
-      finalData[index],
-      boxLeft,
-      boxRight,
-      boxTop,
-      boxBottom
-    )
+    doesSegmentIntersectBox(points[index - 1], points[index], boxLeft, boxRight, boxTop, boxBottom)
   ) {
     return true;
   }
-  // Check next segment
   if (
-    index < finalData.length - 1 &&
-    doesSegmentIntersectBox(
-      finalData[index],
-      finalData[index + 1],
-      boxLeft,
-      boxRight,
-      boxTop,
-      boxBottom
-    )
+    index < points.length - 1 &&
+    doesSegmentIntersectBox(points[index], points[index + 1], boxLeft, boxRight, boxTop, boxBottom)
   ) {
     return true;
   }
   return false;
 }
 
-function shouldFlipLabelHorizontal(
+interface LabelPlacement {
+  flip: boolean;
+  offset: number;
+}
+
+/**
+ * Compute the best placement for a label on a vertical chart.
+ *
+ * Tries placing the label above the point first. If the adjacent line segments
+ * collide with that bounding box, tries below. If both positions collide, retries
+ * with increasing offsets (up to 3x the base). Returns the first collision-free
+ * placement, or below at max offset as the least-bad fallback.
+ *
+ * The bounding box is expanded by strokeWidth / 2 on all sides to account for the
+ * visual width of the line itself.
+ */
+function computeLabelPlacementVertical(
   finalData: [number, number][],
   index: number,
   labelText: string,
   fontSize: number,
-  labelOffset: number
-): boolean {
-  // In horizontal orientation, finalData is still [xScaled, yScaled] but
-  // the path uses y(d[0]) and x(d[1]), so pixel positions are swapped.
-  // px = xAxis.getScaleValue (maps to SVG y), py = yAxis.getScaleValue (maps to SVG x)
-  // Label is placed at SVG (py + labelOffset, px) — to the right of the point.
-  // We check if that box collides with adjacent segments in SVG space.
+  baseOffset: number,
+  strokeWidth: number
+): LabelPlacement {
   const [px, py] = finalData[index];
   const textWidth = fontSize * labelText.length * CHAR_WIDTH_FACTOR;
+  const halfWidth = textWidth / 2;
   const halfHeight = fontSize / 2;
+  const strokePad = strokeWidth / 2;
 
-  // In SVG space for horizontal: svgX = py, svgY = px
-  // Label "to the right": svgX = py + labelOffset, svgY = px
-  // Box in SVG coords:
-  const boxLeft = py + labelOffset;
-  const boxRight = py + labelOffset + textWidth;
-  const boxTop = px - halfHeight;
-  const boxBottom = px + halfHeight;
+  const boxLeft = px - halfWidth - strokePad;
+  const boxRight = px + halfWidth + strokePad;
 
-  // Segments in SVG space: point i has svgX=py_i, svgY=px_i
-  const toSvg = (idx: number): [number, number] => [finalData[idx][1], finalData[idx][0]];
+  for (const offset of [baseOffset, baseOffset * 2, baseOffset * 3]) {
+    const aboveTop = py - offset - halfHeight - strokePad;
+    const aboveBottom = py - offset + halfHeight + strokePad;
+    if (!adjacentSegmentsIntersectBox(finalData, index, boxLeft, boxRight, aboveTop, aboveBottom)) {
+      return { flip: false, offset };
+    }
 
-  if (
-    index > 0 &&
-    doesSegmentIntersectBox(toSvg(index - 1), toSvg(index), boxLeft, boxRight, boxTop, boxBottom)
-  ) {
-    return true;
+    const belowTop = py + offset - halfHeight - strokePad;
+    const belowBottom = py + offset + halfHeight + strokePad;
+    if (!adjacentSegmentsIntersectBox(finalData, index, boxLeft, boxRight, belowTop, belowBottom)) {
+      return { flip: true, offset };
+    }
   }
-  if (
-    index < finalData.length - 1 &&
-    doesSegmentIntersectBox(toSvg(index), toSvg(index + 1), boxLeft, boxRight, boxTop, boxBottom)
-  ) {
-    return true;
+
+  return { flip: true, offset: baseOffset * 3 };
+}
+
+/**
+ * Compute the best placement for a label on a horizontal chart.
+ *
+ * In horizontal orientation finalData is [xAxisScale, yAxisScale] but the SVG path
+ * swaps them: svgX = yAxisScale (d[1]), svgY = xAxisScale (d[0]). Collision checks
+ * are performed in SVG space. The default position is to the right of the point;
+ * the flipped position is to the left.
+ */
+function computeLabelPlacementHorizontal(
+  finalData: [number, number][],
+  index: number,
+  labelText: string,
+  fontSize: number,
+  baseOffset: number,
+  strokeWidth: number
+): LabelPlacement {
+  const [px, py] = finalData[index];
+  const textWidth = fontSize * labelText.length * CHAR_WIDTH_FACTOR;
+  const halfHeight = fontSize / 2;
+  const strokePad = strokeWidth / 2;
+
+  const svgPoints = finalData.map((d): [number, number] => [d[1], d[0]]);
+
+  const boxTop = px - halfHeight - strokePad;
+  const boxBottom = px + halfHeight + strokePad;
+
+  for (const offset of [baseOffset, baseOffset * 2, baseOffset * 3]) {
+    const rightLeft = py + offset - strokePad;
+    const rightRight = py + offset + textWidth + strokePad;
+    if (!adjacentSegmentsIntersectBox(svgPoints, index, rightLeft, rightRight, boxTop, boxBottom)) {
+      return { flip: false, offset };
+    }
+
+    const leftLeft = py - offset - textWidth - strokePad;
+    const leftRight = py - offset + strokePad;
+    if (!adjacentSegmentsIntersectBox(svgPoints, index, leftLeft, leftRight, boxTop, boxBottom)) {
+      return { flip: true, offset };
+    }
   }
-  return false;
+
+  return { flip: true, offset: baseOffset * 3 };
 }
 
 export class LinePlot {
@@ -217,7 +243,7 @@ export class LinePlot {
     ];
 
     if (this.plotData.pointLabels && this.plotData.pointLabels.length > 0) {
-      const labelOffset = 10;
+      const labelOffset = 14;
       const fontSize = 12;
       const textData: TextElem[] = [];
 
@@ -228,9 +254,16 @@ export class LinePlot {
         }
 
         if (this.orientation === 'horizontal') {
-          const flip = shouldFlipLabelHorizontal(finalData, i, label, fontSize, labelOffset);
+          const { flip, offset } = computeLabelPlacementHorizontal(
+            finalData,
+            i,
+            label,
+            fontSize,
+            labelOffset,
+            this.plotData.strokeWidth
+          );
           textData.push({
-            x: flip ? py - labelOffset : py + labelOffset,
+            x: flip ? py - offset : py + offset,
             y: px,
             text: label,
             fill: this.plotData.strokeFill,
@@ -240,10 +273,17 @@ export class LinePlot {
             rotation: 0,
           });
         } else {
-          const flip = shouldFlipLabelVertical(finalData, i, label, fontSize, labelOffset);
+          const { flip, offset } = computeLabelPlacementVertical(
+            finalData,
+            i,
+            label,
+            fontSize,
+            labelOffset,
+            this.plotData.strokeWidth
+          );
           textData.push({
             x: px,
-            y: flip ? py + labelOffset : py - labelOffset,
+            y: flip ? py + offset : py - offset,
             text: label,
             fill: this.plotData.strokeFill,
             verticalPos: 'middle',