score:1

Accepted answer

You can use the SVGRenderer tool to render those lines. Here is an example how to do it for the biggest marker in your demo:

https://jsfiddle.net/BlackLabel/hbjftaw6/

Code:

  chart: {
    events: {
      render() {
        let chart = this,
          point = chart.series[0].points[0];

        //if exist - destroy after the resize
        if(point.xLine && point.yLine) {
            point.xLine.destroy();
            point.yLine.destroy();
        }

        point.xLine = chart.renderer.path(['M', chart.plotLeft, point.plotY + chart.plotTop,
            'L', point.plotX + chart.plotLeft, point.plotY + chart.plotTop
          ])
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            dashstyle: 'ShortDash'
          })
          .add();

        point.yLine = chart.renderer.path(['M', chart.plotLeft + point.plotX, point.plotY + chart.plotTop,
            'L', point.plotX + chart.plotLeft, chart.plotHeight + chart.plotTop
          ])
          .attr({
            'stroke-width': 1,
            stroke: 'red',
            dashstyle: 'ShortDash'
          })
          .add();

      }
    }
  },

API: https://api.highcharts.com/highcharts/series.line.dashStyle

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


Related Query

More Query from same tag