Как показать мульти метки данных на группы Highcharts колонки

Question

У меня есть данные, которые я хочу, чтобы отобразить на колонке, как это:

Я попытался this code, но он не работает. Как я могу это сделать?

HTML:

<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> 

Javascript:

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -70, 
      verticalAlign: 'top', 
      y: 20, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      formatter: function() { 
       var allSeries = this.series.chart.series; 
       var totalAmount = 0; 
       for(var s in allSeries) { totalAmount += allSeries[s].points[this.point.x].Amount; } 

       return '<b>'+ this.x +'</b><br/>'+ 
        this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+ 
        'Total: '+ this.point.stackTotal + ' (<b>$ ' + totalAmount +')'; 
      } 
     }, 
     plotOptions: { 
      column: { 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black, 0 0 3px black' 
        }, 
        formatter: function() { 
         return this.point.Amount + '%' 
        }, 

       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [{y: 5, Amount: 100}, {y: 3, Amount: 60}, {y: 4, Amount: 80}] 
     }, { 
      name: 'Joe', 
      data: [{y: 3, Amount: 60}, {y: 4, Amount: 80}, {y: 4, Amount: 80}] 
     }] 
    }); 
}); 

Answer 1

Заканчивать этот Fiddle

dataLabels: { 
     enabled: true, 
     useHTML: true, 
     color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
     style: { 
     textShadow: '0 0 3px black, 0 0 3px black' 
     }, 
     formatter: function() { 
     var pointHeight = this.point.shapeArgs.height + 20; 
     return '<div class="datalabel" style="position: relative; top: 0px">' + this.point.Amount + '%' + '</div><div class="datalabelInside" style="text-shadow:none;color:#000;position: absolute; top:' + pointHeight/2 + 'px">' + this.y + '</div>'; 
     } 

    }