Search code examples
javascriptchartshighchartsangular-highcharts

Tool tip for static plotline in y-axis


I have drawn two static lines in my chart to indicate high and low range. I could keep labels for the line but I can't keep a tooltip for the the static line. Is there any way I can do this?

yAxis: {
  plotLines: [{
    value: 70,
    width: 1,
    color: '#68AF46'
    label: {
      style: {
        color: '#FE7246',
        fontWeight: 'bold'
      },
      text: '70',
      align: 'right',
      x: -10,
      y: 16
    },
  },
  {
    value: 180,
    width: 1,
    color: '#FE7246',
    label: {
      text: '180',
      align: 'right',
      style: {
        color: '#FE7246',
        fontWeight: 'bold'
      },
    },
  }]
}

I find no property to keep tooltip for plotlines.


Solution

  • You can also add two additional dummy series and hide them under the plot lines:

    series: [{
        data: [1, 50, 100, 200]
    }, {
        data: [70, 70, 70, 70],
        showInLegend: false,
        lineWidth: 0.5,
        color: 'transparent',
        marker: {
            radius: 0
        },
        tooltip: {
            pointFormat: 'plotLine1'
        }
    }, {
        data: [180, 180, 180, 180],
        showInLegend: false,
        color: 'transparent',
        marker: {
            radius: 0
        },
        tooltip: {
            pointFormat: 'plotLine2'
        }
    }]
    

    Live demo: http://jsfiddle.net/BlackLabel/2Ln05yes/

    API Reference: https://api.highcharts.com/highcharts/series.line.tooltip