Merge pull request #20814 from highcharts/bugfix/20792-plotline-html-…

…labels bugfix/20792-plotline-html-labels
highcharts · Mar 21, 2024 · 649ec9d · 649ec9d
2 parents 75f2398 + 9652ea9
commit 649ec9d
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 59 deletions.
diff --git a/samples/unit-tests/plotbandslines/plotbandslines/demo.js b/samples/unit-tests/plotbandslines/plotbandslines/demo.js
@@ -1,69 +1,77 @@
 QUnit.test('Plot band labels', function (assert) {
-    var chart,
-        options = {
-            chart: {
-                width: 600
-            },
-            xAxis: {
-                plotBands: [
-                    {
-                        from: 5,
-                        to: 6,
-                        color: Highcharts.getOptions().colors[0],
-                        label: {
-                            text: 'Before'
-                        }
-                    },
-                    {
-                        from: 12,
-                        to: 13,
-                        color: Highcharts.getOptions().colors[2],
-                        label: {
-                            text: 'Within'
-                        }
-                    },
-                    {
-                        from: 25,
-                        to: 26,
-                        color: Highcharts.getOptions().colors[3],
-                        label: {
-                            text: 'After'
-                        }
+    let chart;
+    const options = {
+        chart: {
+            width: 600
+        },
+        xAxis: {
+            plotBands: [
+                {
+                    from: 5,
+                    to: 6,
+                    color: Highcharts.getOptions().colors[0],
+                    label: {
+                        text: 'Before'
                     }
-                ]
-            },
-
-            yAxis: {
-                plotLines: [{
-                    value: 4,
+                },
+                {
+                    from: 12,
+                    to: 13,
+                    color: Highcharts.getOptions().colors[2],
                     label: {
-                        text: 'Big text',
-                        useHTML: true,
-                        style: {
-                            fontSize: '2em'
-                        },
-                        align: 'right'
+                        text: 'Within'
                     }
-                }, {
-                    value: 5,
+                },
+                {
+                    from: 25,
+                    to: 26,
+                    color: Highcharts.getOptions().colors[3],
                     label: {
-                        text: 'Small text',
-                        useHTML: true,
-                        align: 'right'
+                        text: 'After'
                     }
-                }]
-            },
-
-            series: [
+                },
                 {
-                    data: [1, 2, 3, 4, 5, 6, 7],
-                    pointStart: 10
+                    value: 11,
+                    label: {
+                        text: 'Abcdef',
+                        x: 0,
+                        useHTML: true
+                    }
                 }
             ]
-        };
+        },
+
+        yAxis: {
+            plotLines: [{
+                value: 4,
+                label: {
+                    text: 'Big text',
+                    useHTML: true,
+                    style: {
+                        fontSize: '2em'
+                    },
+                    align: 'right'
+                }
+            }, {
+                value: 5,
+                label: {
+                    text: 'Small text',
+                    useHTML: true,
+                    align: 'right'
+                }
+            }]
+        },
+
+        series: [
+            {
+                data: [1, 2, 3, 4, 5, 6, 7],
+                pointStart: 10
+            }
+        ]
+    };
 
     // Create the Highcharts chart
-    chart = $('#container').highcharts(options).highcharts();
+    chart = Highcharts.chart('container', options);
 
     assert.equal(
         typeof chart.xAxis[0].plotLinesAndBands[0].label,
@@ -81,8 +89,18 @@ QUnit.test('Plot band labels', function (assert) {
         'Highcharts - after'
     );
 
+    const line = chart.xAxis[0].plotLinesAndBands[3].svgElem.getBBox(),
+        label = chart.xAxis[0].plotLinesAndBands[3].label;
+
+    assert.close(
+        line.x,
+        label.x,
+        1,
+        'HTML label should be placed (x-pos) near the plot line (#20792).'
+    );
+
     // Create the Highcharts Stock chart
-    chart = $('#container').highcharts('StockChart', options).highcharts();
+    chart = Highcharts.stockChart('container', options);
 
     assert.equal(
         typeof chart.xAxis[0].plotLinesAndBands[0].label,

diff --git a/ts/Core/Axis/PlotLineOrBand/PlotLineOrBand.ts b/ts/Core/Axis/PlotLineOrBand/PlotLineOrBand.ts
@@ -271,11 +271,11 @@ class PlotLineOrBand {
         ) {
             // Apply defaults
             optionsLabel = merge({
-                align: horiz && isBand && 'center',
+                align: horiz && isBand ? 'center' : void 0,
                 x: horiz ? !isBand && 4 : 10,
-                verticalAlign: !horiz && isBand && 'middle',
+                verticalAlign: !horiz && isBand ? 'middle' : void 0,
                 y: horiz ? isBand ? 16 : 10 : isBand ? 6 : -4,
-                rotation: horiz && !isBand && 90
+                rotation: horiz && !isBand ? 90 : 0
             } as PlotLineLabelOptions, optionsLabel);
 
             this.renderLabel(optionsLabel, path, isBand, zIndex);