CODEWITHSUNDEEP
chartshighchartsangular2-highcharts
Rafique Mohammed
Rafique Mohammed

Reputation: 3806

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

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

Image 01

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

Image 02

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.

Upvotes: 0

Views: 625

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

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.

Upvotes: 1

Related Questions