JRFweb
Posts: 2
Joined: Fri Jan 12, 2018 9:56 am

Additional lines on columns in a column chart

Hi!

Is it possible to recreate my chart in HighCharts? Obviously creating the columns is not an issue, but I don't know how to add the orange lines. They also represent an amount of money.

Thanks for any help!
Attachments
Chart.PNG
Chart.PNG (7.21 KiB) Viewed 935 times
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Additional lines on columns in a column chart

Hi, JRFweb!

Could you tell me, on what conditions do you want to display those lines? At what height should they be positioned?

I prepared an online example for you that it can be easily done using renderer.rect method:

Code: Select all

chart: {
    type: 'column',
    events: {
      load() {
        var chart = this,
          points = chart.series[0].points,
          lineWidth = 0.8; //column percent
        points.forEach((point) => {
          chart.renderer.rect(
              point.plotX + chart.plotLeft - (lineWidth / 2) * point.shapeArgs.width, //x
              chart.plotHeight + chart.plotTop - point.shapeArgs.height + 10, //y
              lineWidth * point.shapeArgs.width, //width
              5 //height
            )
            .add()
            .attr({
              fill: 'red',
              zIndex: 3
            })
        })
      }
    }
  },
jsFiddle: https://jsfiddle.net/BlackLabel/tasrm0xf/

API Reference: https://api.highcharts.com/class-refere ... derer#rect

Best regards!
Rafal
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Cloud”