CODEWITHSUNDEEP
highcharts
nikicc
nikicc

Reputation: 638

How to plot horizontal lines over the some columns of columnrange chart in Highcharts

I am working on a columnrange graph in Highcharts where I plot different measurements and confidence intervals in the same plot: enter image description here

The first few columns inside a group (e.g. Januar) represent measurements for different cities, while the last column represent confidence intervals. I would like to add horizontal lines to the confidence intervals representing the data means. That is, each orange column would get its own line at a specific heigh going from the left to the right side of the orange rectangle. How do I plot such lines?

I know how to add lines as a separate series of type line. However, doing so, I'm not sure how to guess the exact location of orange column and also I do not know how to handle cases when some columns are hidden through the legend.

This question is related to this question though I am not able to get any of that solutions to work in my case.

Here is the fiddle: https://jsfiddle.net/nikicc/rqxqm4hm/

Upvotes: 0

Views: 681

Answers (1)

morganfree
morganfree

Reputation: 12472

You can use renderer.path to draw proper lines.

function drawDataMeans() {
  const intervalSeries = this.get('conf-interval'),
        series = this.series.filter(series => intervalSeries !== series)

  let lines = this.dataMeansLines

  if (!lines) {
    lines = this.dataMeansLines = series[0].data.map(series => this.renderer.path().attr({
      'stroke-width': 2,
      stroke: 'black'
    }).add(intervalSeries.group))
  }

  const visibleSeries = series.filter(series => series.visible)

  if (intervalSeries.visible && visibleSeries.length) {
    intervalSeries.data.forEach((point, i) => {
      const mean = visibleSeries.reduce((sum, series) => sum + series.data[i].high, 0) / visibleSeries.length
      const {x, width} = point.shapeArgs
      const y = this.yAxis[0].toPixels(mean, true)

      lines[i].attr({
        d: `M ${x} ${y} L ${x + width} ${y}`,
        visibility: 'visible'
      })
    })
  } else {
    lines.forEach(line => line.attr({visibility: 'hidden'}))
  }
}

Hook on load/redraw events

chart: {
  type: 'columnrange',
  inverted: false,
  events: {
    load: drawDataMeans,
    redraw: drawDataMeans
  }
},

example: https://jsfiddle.net/dq48sq3w/

Upvotes: 1

Related Questions