Add a line on each bar for stacked and grouped column in HighCharts

Question

I want to add a red line on each stackbar. Refer the pic below.

If you notice in the picture there is a red line on top of each stackbar. I have tried many workaround but none of them works. Could anybody have idea how to achieve this?

Pasting the sample code.

 this.graphData.graphRef = new Chart({
  chart: {
    type: 'column',
    height: this.graphHeight
  },
  xAxis: {
    categories: this.graphData.column,
    labels: {
      useHTML: true,
    }
  },
  yAxis: {
    min: 0,
    stackLabels: {
      enabled: true,
      rotation: 270,
      x: -16,
      y: 160,
      style: {
        fontWeight: 'bold',
        color: 'black'
      }
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      pointPadding: 0.3,
      dataLabels: {
        enabled: false,
        color: '#000',
        style: {
          textOutline: '0px',
          fontSize: '10px',
          fontWeight: 'none'
        }
      },
      pointWidth: 30
    },
   ...
  series: [
  {
     name: 'CBG',
     data: [15,20, 14, 20],
     stack: 'P',
     zIndex: i
   },
   ...
  {
     name: 'CBG',
     data: [15, 23, 14, 20],
     stack: 'R',
     zIndex: i
   },
   ...
  {
     name: 'CBG',
     data: [25, 23, 24, 20],
     stack: 'A/C',
     zIndex: i
   },
   ...
  {
     name: 'CBG',
     data: [25, 23, 14, 20],
     stack: 'E',
     zIndex: i
   },
   ...

 ]
});

Any help or suggestion is appreciated. Thanks!

UPDATED

For ex. let assume the red line is called as CBG. if the CBG of stackbar P of Q1FY2020 Group is 1500 then the red line should be drawn over the stack where Y axis is 1500. Hope you understood.

score 1 · Answer 1 · answered Mar 19 '20 at 10:02

1

You can use the SVGRenderer tool to render those lines as a path inside the render callback. I prepared an example with calculated points positions.

Demo: https://jsfiddle.net/BlackLabel/r9L0yhg2/

events: {
  render() {
    let chart = this,
      distanceFromStack = 10;

    chart.series.forEach(s => {
      s.points.forEach((p, i) => {
        //path coordinates
        let pathx1 = p.barX + chart.plotLeft,
          pathy1 = p.plotY + distanceFromStack,
          pathx2 = pathx1 + p.pointWidth,
          pathy2 = pathy1;

                    //destroy existing path after resize
        if (p.customLine) {
          p.customLine.destroy();
        }

        //render path only for the upper points - their yBottom is different than chart.plotHeight
        if (p.yBottom !== chart.plotHeight) {
          p.customLine = chart.renderer.path(['M', pathx1, pathy1, 'L', pathx2, pathy2]).attr({
            stroke: 'red',
            'stroke-width': 2
          }).add();
        }
      })
    })
  }
}

API: https://api.highcharts.com/highcharts/chart.events.render

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

If something is unclear - feel free to ask.

answered Mar 19 '20 at 10:02

Sebastian Wędzel

11,417
1
6
16

Thanks alot brother! I can see the line but thr is few problems. The red line goes behind the stack if the stack value is greater. How to bring it forward? and the red line has some value based on that it should draw so how to calculate the distanceFromStack value? I know ths are lots of question but i seriously need the answer bro! – Rafique Mohammed Mar 20 '20 at 06:28
As I understood - you would like to achieve something like this: https://jsfiddle.net/BlackLabel/5dqzwmbx/ to make more space for the red line, set `yAxis.max` to bigger value (like 60 in this case). I assumed that this value above the red line is a stack labels value, so I positioned them by using `stackLabels.y`. – Sebastian Wędzel Mar 20 '20 at 11:42
No brother. I have updated the Question. Please check. – Rafique Mohammed Mar 22 '20 at 07:53
I am sorry, but I don't understand your requirement. I understood that you want to render this line in different point heights - to do it add logic for particular points to calculate the y value of the rendered path (pathy1 and pathy2). – Sebastian Wędzel Mar 23 '20 at 11:24

Add a line on each bar for stacked and grouped column in HighCharts

1 Answers1