score:1

You can use the SVGRenderer tool to render those lines as a path inside the render callback. I prepared an example with calculated points positions.

Demo: https://jsfiddle.net/BlackLabel/r9L0yhg2/

events: {
  render() {
    let chart = this,
      distanceFromStack = 10;

    chart.series.forEach(s => {
      s.points.forEach((p, i) => {
        //path coordinates
        let pathx1 = p.barX + chart.plotLeft,
          pathy1 = p.plotY + distanceFromStack,
          pathx2 = pathx1 + p.pointWidth,
          pathy2 = pathy1;

                    //destroy existing path after resize
        if (p.customLine) {
          p.customLine.destroy();
        }

        //render path only for the upper points - their yBottom is different than chart.plotHeight
        if (p.yBottom !== chart.plotHeight) {
          p.customLine = chart.renderer.path(['M', pathx1, pathy1, 'L', pathx2, pathy2]).attr({
            stroke: 'red',
            'stroke-width': 2
          }).add();
        }
      })
    })
  }
}

API: https://api.highcharts.com/highcharts/chart.events.render

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

If something is unclear - feel free to ask.


Related Query

More Query from same tag