Highcharts - Hiding plot line behind plot label

Question

The problem is demonstrated below in the JSFiddle. I want the line behind the text to not be shown. I'd like to just set the background color of the label to white, and have the plot line be hidden behind the label.

I want the label and plot line to look like this:

Anyone have any ideas?

http://jsfiddle.net/qajb5vmo/

Here's the example code I'm using to demonstrate my problem.

$(function () {
Highcharts.chart('container', {
    xAxis: {
        tickInterval: 24 * 3600 * 1000, // one day
        type: 'datetime',
        plotLines: [{
            color: 'red',
            width: 2,
            value: Date.UTC(2010, 0, 6),           
            label: {
                text: 'Plot line',
                textAlign: 'center',
                rotation: 0
            }
        }]
    },

    yAxis: {
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000
    }]
});
});

Answer 1

You can change the position of the label by setting the x and y axis as shown in the fiddle

label: {
                    text: 'Plot line',
                    textAlign: 'center',
                    rotation: 0,
                    y:-10
                }

Answer 2

You can enable labels to be drawn as html. It will cause that they will be rendered above the svg elements.

label: {
                y: 20,
                useHTML: true,
                text: 'Plot line',
                textAlign: 'center',
                rotation: 0,
                style: {
                  backgroundColor: 'white'
                }
            }

example: http://jsfiddle.net/qajb5vmo/5/

Answer 3

This is a hack to reduce the line height of the plot line. I don't recommend using this method as this is a hack.

http://jsfiddle.net/qod5hzb2/

  const pathSvgArray = $('.highcharts-plot-lines-0 path').attr('d').split('');
  pathSvgArray[2] = '75';

  $('.highcharts-plot-lines-0 path').attr('d', pathSvgArray.join(' '));