Highcharts создают легенду для водяной стены и столбчатой ​​диаграммы стека

Question

Новичок в Highcharts, необходимо создать водопад и столбчатую диаграмму с накоплением, как на прикрепленном изображении. Я заполнил диаграмму, но не могу получить легенду для столбца стека.

https://jsfiddle.net/b9vLxoua/ Here is the chart code

Требуемая диаграмма с выделенной легендой

Помогите, пожалуйста.

Answer 1

Вы можете создать собственную легенду, используя инструмент SVERenderer в обратном вызове рендеринга.

Демо: https://jsfiddle.net/BlackLabel/qhr6nsw9/

  render() {
    let chart = this,
                    colors = ['#003975', '#F9BD50', '#3FA27E']

    chart.series[1].points.forEach((p,i) => {
      if (p.category === 0) {
                    if (p.customRect) {
                        p.customRect.destroy();
                    }
        p.customRect = chart.renderer.rect(chart.plotSizeX + chart.plotLeft + 10, 100 + i * 50, 20, 20, 5)
          .attr({
            fill: colors[i],
            zIndex: 3
          })
          .add();
                    if (p.customText) {
                        p.customText.destroy();
                    }   
                    p.customText = chart.renderer.label(p.t, chart.plotSizeX + chart.plotLeft + 40, 100 + i * 50).add()
      }
    })
  }

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

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