Our client was trying to add vertial lines (indicating event in time) to a simple line chart with dates as x-axis. Unfurtunatly they succeeded only adding a single line according to index on x-axis and not value.

Here is the solution we provided them:

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)
})

LINES:

This code allows you to set a benchmark on your graph to visually assess whether Key Performance Indicators (KPIs) are being met. By establishing a benchmark, you can clearly see how your data points compare against a predefined standard or goal. This is particularly useful for performance tracking and decision-making, as it enables you to:

• Quickly Identify Trends: See if your data consistently meets or falls short of the benchmark over time.
• Highlight Areas of Improvement: Easily spot periods where performance dips below the expected level.
• Make Data-Driven Decisions: Use visual insights to inform strategic actions and adjustments.
• Communicate Effectively: Share clear, visual representations of performance with stakeholders, making it easier to convey whether objectives are being achieved.

By incorporating benchmarks into your graphs, you enhance the utility of your visual data analysis, providing a straightforward way to monitor progress and take timely corrective actions if needed.

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

widget.on('processresult', (w, ev) => {
  ev.result.yAxis[0].plotLines = [{
    color: 'green',
    dashStyle: 'ShortDash',
    width: 2,
    value: 5,
    zIndex: 5
  }]

  ev.result.yAxis[0].plotBands = [{
    from: 5,
    to: 10,
    color: '#fff',
    label: {
      text: 'Benchmark',
      style: {
        color: '#000'
      }
    }
  }]
})

BANDS:

This code allows you to set color-coded bars on your graph. This color-coding provides an immediate visual cue about performance levels:

• Green Bars: Indicate that you are performing well and meeting or exceeding your targets.
• Yellow Bars: Suggest that there is room for improvement. Performance is close to target but not quite there yet.
• Red Bars: Signify that performance is below expectations and needs significant improvement.

By using these color-coded bars, you can:

• Quickly Assess Performance: Instantly see which areas are doing well and which need attention.
• Prioritize Actions: Focus on red and yellow areas to improve overall performance.
• Enhance Understanding: Make it easy for stakeholders to grasp performance status at a glance.
• Improve Communication: Convey performance levels clearly and effectively through visual representation.

Incorporating color-coded bars into your graphs enhances their functionality, making it simpler to monitor performance and take necessary actions based on visual feedback.

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

widget.on('processresult', (w, ev) => {
  ev.result.yAxis[0].plotBands = [{
    from: 5,
    to: 10,
    color: '#f2f2f2',
    label: {
      text: 'Average',
      style: {
        color: '#000'
      }
    }
  },
  {
    from: 10,
    to: 20,
    color: '#00ff00',
    label: {
      text: 'Above Average',
      style: {
        color: '#000'
      }
    }
  }]
})