Highcharts: Draw line from data markers to axis?

Question

I'm trying to make this combination chart in Highcharts:

So I'm wondering how to draw that dashed line from the data points out to the axes.

The Y-Axis is a percentage, and the X-axis is a date.

Currently, I'm combining a spline chart, area chart, and stacked column chart.

My series data currently looks like this:

series: [{
    type: 'spline',
    name: 'Average',
    data: [0, 50, 85, 95, 95, 95, 97],
    dashStyle: 'shortdash',
    marker: {
      radius: 8,
      lineWidth: 2,
      lineColor: 'skyblue',
      fillColor: 'white',
      symbol: 'triangle'
    }
  },
  {
    type: 'area',
    name: ' ',
    color: '#D8E1E8',
    data: [0, 0, 15, 25, 25],
    marker: {
      radius: 8,
      fillColor: 'skyblue',
      symbol: 'triangle'
    }
  },

  {
    type: 'area',
    name: ' ',
    color: '#FFFFCB',
    data: [0, 0, 15, 15, 15],
    marker: {
      radius: 1,
    },
    dataLabels: {
      enabled: false
    }
  },
  {
    type: 'area',
    name: ' ',
    color: '#B5E9FF',
    data: [0, 50, 55, 55, 55],
    marker: {
      radius: 1,
    },

  },
  {
    name: 'John',
    color: '#990000',
    data: [0, 13, 0]
  }, {
    name: 'Jane',
    color: '#FFB900',
    data: [0, 12, 0]
  }, {
    name: 'Joe',
    color: '#647D2D',
    data: [0, 24, 0]
  }
]

Answer 1

Use renderer.path to create an svg path which has 3 points - start, middle point and stop.

A function for creating a path:

function drawDashLine (chart, point, dashLine) {
  const xAxis = chart.xAxis[0]
  const yAxis = chart.yAxis[0]

  const x = Math.round(xAxis.toPixels(point[0]))
  const y = Math.round(yAxis.toPixels(point[1]))
  const d = ['M', xAxis.left, y, 'L', x, y, 'L', x, yAxis.top + yAxis.height] 

  return dashLine
    ? dashLine.attr({ d })
    : chart.renderer.path(d).attr({ 'stroke-dasharray': '3,1', 'stroke': 'skyblue', 'stroke-width': 2, zIndex: 1 }).add()
}

Call the function on load - to create the lines, and on redraw to recalculate the position of the lines.

 chart: {
    events: {
      load: function () {
        this.dashLines = dashLines.map(point => drawDashLine(this, point))
      },
      redraw: function () {
        this.dashLines.forEach((line, i) => drawDashLine(this, dashLines[i], line))
      }
    }
  },

live example: https://jsfiddle.net/em7e9o2t/