ハイチャート - プロットラインの裏にプロットラインを隠す

Question

この問題は以下のJSFiddleで実証されています。私はテキストの背後にある行を表示しないようにします。私は、ラベルの背景色を白に設定し、プロットラインをラベルの後ろに隠すようにしたいと思います。

私はラベルとプロットラインは次のようになりたい：

誰もが任意のアイデアがありますか？

http://jsfiddle.net/qajb5vmo/

ここに私は私の問題を示すために使用しているサンプルコードを示します。

$(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

あなたはhtmlとして描画するラベルを有効にすることができます。それは、それらがsvg要素の上にレンダリングされる原因になります。

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

例：http://jsfiddle.net/qajb5vmo/5/

Answer 2

あなたは、これは、プロットラインの行の高さを低減するためのハックですfiddle

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

Answer 3

に示すようにxとy軸を設定することにより、ラベルの位置を変更することができます。これはハックなのでこのメソッドの使用はお勧めしません。

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(' '));