Create vertical line in line chart with dates as x-axis

Hi eshaul ,

I've had success in the past adding labels as plotBands, but not as plotLines.

You can try the following code to generate and add plotLines and Labels to either xAxis or yAxis at any given positions (for yAxis, values, or xAxis, category indexes). The following looks for the position of xAxis categories and then adds lines and labels to them.

function makePlotLine(color, style, width, position) {
  return {
    color: color,
    dashStyle: style,
    width: width,
    value: position,
    zIndex: 5
  }
}

function makeLabel(labelText, labelColor, position) {
  return {
    value: position,
    color: '#fff',
    label: {
      text: labelText,
      style: {
        color: labelColor
      }
    }
  }
}

const categoriesWithLine = ['07/2011', '01/2012']
widget.on('processresult', (w, args) => {
  args.result.xAxis.plotLines = []
  args.result.xAxis.plotBands = []
  for (let i = 0; i < categoriesWithLine.length; i++) {
    const currentCat = categoriesWithLine[i]
    const indexOfCurrentCat = args.result.xAxis.categories.indexOf(currentCat)
    const plotLine = makePlotLine('green', 'ShortDash', 2, indexOfCurrentCat)
    const label = makeLabel(`This is a label on ${currentCat}`, 'black', indexOfCurrentCat)
    args.result.xAxis.plotLines.push(plotLine)
    args.result.xAxis.plotBands.push(label)
  }
})

widget.on('ready', (w, args) => {
  $('svg .highcharts-plot-bands-labels-0', element).insertAfter('svg .highcharts-plot-bands-0', element)
})

This is tested and working in the following configuration against the Sample Retail dataset:

You can get more info on plotBand and plotLine configuration options here:

Plot bands and plot lines | Highcharts

Let me know how you go?