Добавьте линию на каждом столбце для сложенного и сгруппированного столбца в HighCharts

Question

Я хочу добавить красную линию на каждой панели стека. См. Пи c ниже.

Если вы заметили на рисунке, на каждой панели стека есть красная линия. Я пробовал много обходных путей, но ни один из них не работает. Может ли кто-нибудь иметь представление о том, как этого добиться?

Вставка примера кода.

 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
   },
   ...

 ]
});

Любая помощь или предложение приветствуется. Спасибо!

ОБНОВЛЕНО

Например. допустим, красная линия называется CBG. если CBG стековой панели P группы Q1FY2020 равен 1500, тогда красная линия должна быть проведена поверх стека, где ось Y равна 1500. Надеюсь, вы поняли.

Answer 1

Вы можете использовать инструмент SVGRenderer для рендеринга этих линий как пути внутри обратного вызова рендеринга. Я подготовил пример с расчетными точками позиций.

Демо: 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

Если что-то неясно - не стесняйтесь спрашивать.