Highchart | Сгруппированная гистограмма с накоплением | Несколько стековых меток

Question

В настоящее время информация является только нижним краем бара. Но необходимо отображать информацию на обоих концах столбцов в гистограмме с накоплением.

Я использую метки стека для отображения информации, которая была выровнена для отображения информации в нижней части панели.

Требование: общее количество столбцов в стеке должно отображаться вверху, а название категории должно оставаться внизу.

Я гуглил примерно то же самое, но не помогло.

В поисках решения. Заранее спасибо.

JSFiddle: http://jsfiddle.net/mkdudeja/c5debf6g/6/

$(function () {
    
    var options = {
      chart: {
        type: 'column',
        backgroundColor: '#f6f6f7'
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      exporting: {
        enabled: false
      },
      legend: {
        symbolRadius: 2,
        itemStyle: {
          color: '#666',
          fontSize: '1.1rem',
          fontWeight: '400',
          fontFamily: '"Open Sans", Arial, sans-serif'
        }
      },
      xAxis: {
        categories: ['Overall', 'Timing', 'Impact'],
        labels: {
          y: 60,
          style: {
            color: '#333',
            fontSize: '1.3rem',
            fontWeight: '600',
            fontFamily: '"Open Sans", Arial, sans-serif'
          }
        }
      },
      yAxis: {
        min: 0,
        allowDecimals: false,
        lineWidth: 0,
        minorGridLineWidth: 0,
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0,
        title: {
          text: ''
        },
        labels: {
          enabled: false
        },
        stackLabels: {
          enabled: true,
          verticalAlign: 'bottom',
          crop: false,
          overflow: 'none',
          y: 20,
          formatter: function () {
            const $this = this;
            return '$' + $this.total + 'M' +
              '<br>' + $this.stack;
          },
          style: {
            color: '#666',
            fontSize: '1.1rem',
            fontWeight: '400',
            fontFamily: '"Open Sans", Arial, sans-serif'
          }
        }
      },
      tooltip: {
        formatter: function () {
          const $this = this;
          return '$' + $this.y + 'M' +
            '<br>' + $this.point.params.label;
        }
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            color: 'white',
            formatter: function () {
              const $this = this;
              return (($this.y * 100) / $this.total).toFixed(1) + '%';
            }
          }
        }
      },
      series: [{
        type: undefined,
        name: 'Off Track',
        data: [
          {
            y: 12,
            params: {
              label: '12 initiatives'
            }
          },
          {
            y: 5,
            params: {
              label: '5 initiatives'
            }
          },
          {
            y: 4,
            params: {
              label: '4 initiatives'
            }
          }
        ],
        stack: 'Plan',
        color: '#b02c3b'
      }, {
        type: undefined,
        name: 'At Risk',
        data: [
          {
            y: 6,
            params: {
              label: '6 initiatives'
            }
          },
          {
            y: 9,
            params: {
              label: '9 initiatives'
            }
          },
          {
            y: 6,
            params: {
              label: '6 initiatives'
            }
          }
        ],
        stack: 'Plan',
        color: '#fbd155'
      }, {
        type: undefined,
        name: 'On Track',
        data: [
          {
            y: 10,
            params: {
              label: '10 initiatives'
            }
          },
          {
            y: 4,
            params: {
              label: '4 initiatives'
            }
          },
          {
            y: 7,
            params: {
              label: '7 initiatives'
            }
          }
        ],
        stack: 'Plan',
        color: '#35a761'
      }, {
        type: undefined,
        name: 'Off Track',
        data: [
          {
            y: 9,
            params: {
              label: '9 initiatives'
            }
          },
          {
            y: 6,
            params: {
              label: '6 initiatives'
            }
          },
          {
            y: 6,
            params: {
              label: '6 initiatives'
            }
          }
        ],
        stack: 'Forcast',
        color: '#b02c3b',
        showInLegend: false
      }, {
        type: undefined,
        name: 'At Risk',
        data: [
          {
            y: 5,
            params: {
              label: '5 initiatives'
            }
          },
          {
            y: 6,
            params: {
              label: '6 initiatives'
            }
          },
          {
            y: 10,
            params: {
              label: '10 initiatives'
            }
          }
        ],
        stack: 'Forcast',
        color: '#fbd155',
        showInLegend: false
      }, {
        type: undefined,
        name: 'On Track',
        data: [
          {
            y: 7,
            params: {
              label: '7 initiatives'
            }
          },
          {
            y: 6,
            params: {
              label: '6 initiatives'
            }
          },
          {
            y: 8,
            params: {
              label: '8 initiatives'
            }
          }
        ],
        stack: 'Forcast',
        color: '#35a761',
        showInLegend: false
      }]
    };
    

    $('#container').highcharts(options);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Спасибо, Manish

Answer 1

По умолчанию можно размещать метки стека, а в событии render перемещать имена стеков внизу:

    chart: {
        ...,
        events: {
            render: function() {
                var labels = this.yAxis[0].stackTotalGroup.element.children;

                for (var i = 0; i < labels.length; i++) {
                    labels[i].children[1].setAttribute('y', 275);
                    labels[i].children[3].setAttribute('y', 275);
                }
            }
        }
    }

Демонстрационная версия: http://jsfiddle.net/BlackLabel/9raLyx85/

Справочник по API: https://api.highcharts.com/highcharts/chart.events.render