score:1

Accepted answer

You can use mosueOver point's event and create a custom crosshair by using Highcharts.SVGRenderer class.

point: {
  events: {
    mouseOver: function() {
      const chart = this.series.chart,
        x = this.plotX + chart.plotLeft,
        y1 = this.plotY + chart.plotTop,
        y2 = chart.plotHeight + chart.plotTop

      if (!chart.customcrosshair) {
        chart.customcrosshair = chart.renderer.path().attr({
          'stroke-width': 1,
          'stroke-dasharray': '8,3',
          stroke: 'red'
        }).add();
      }

      chart.customcrosshair.attr({
        d: ['M', x, y1, 'L', x, y2]
      });
    }
  }
}

Live demo: http://jsfiddle.net/BlackLabel/osphtxjg/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path


Related Articles