Tool tip for static plotline in y-axis

Question

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.

score 2 · Answer 1 · answered Oct 22 '19 at 10:10

I don't think this functionality exists by default in Highcharts, but you could create it by listening for the mouseover event on your plotLine and creating the tooltip manually. Then, on mouseout, just dismiss the tooltip.

Here's an example with a plotLine with tooltip on y = 50:

Highcharts.chart('container', {
  chart: {
    styledMode: true
  },
  title: {
    text: 'Tooltip On PlotLine'
  },
  yAxis: {
    plotLines: [{
      value: 50,
      width: 1,
      color: '#68AF46',
      label: {
        style: {
          color: '#FE7246',
          fontWeight: 'bold'
        },
        text: '50',
        align: 'right',
        x: -10,
        y: 16
      },
      events: {
        mouseover: function(e) {
          var series = this.axis.series[0];
          var chart = series.chart;
          var PointClass = series.pointClass;
          var tooltip = chart.tooltip;
          var point = (new PointClass()).init(
              series, ['PlotLine', this.options.value]
            );
          var normalizedEvent = chart.pointer.normalize(e);

          point.tooltipPos = [
            normalizedEvent.chartX - chart.plotLeft,
            normalizedEvent.chartY - chart.plotTop
          ];

          tooltip.refresh(point);
        },
        mouseout: function(e) {
          this.axis.chart.tooltip.hide();
        }
      }
    }, ]
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
  },
  series: [{
    data: [10, 30, 20, 60, 80]
  }]
});

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
 height: 400px;
 max-width: 800px;
 margin: 0 auto;
}

.highcharts-tooltip-box {
 fill: black;
 fill-opacity: 0.6;
 stroke-width: 0;
}

.highcharts-tooltip text {
 fill: white;
 text-shadow: 0 0 3px black;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

couldn't find `axis` and `options`. Do I need to import anything ? — Felix Christo, Oct 22 '19 at 10:28
Hmm, no, you shouldn't need to. I just modified the code you provided a bit and added the event handler for mouseover. It should be working in the snippet. If my answer doesn't fit your needs, see if the one by @ppotaczek helps. — JoshG, Oct 22 '19 at 10:39

score 1 · Accepted Answer · answered Oct 22 '19 at 10:30

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

Tool tip for static plotline in y-axis

2 Answers2