2

I want to display custom label on top of bar chart.

Below is my code for stacklabel, problem here is i want category name of stack inside formatter of stacklabel, how do I access it.

stackLabels: {
                enabled: true,
                align: 'right',
                style: {
                  color: 'green',
                  fontWeight: 'bold'
                }


                formatter: function () {
                   return usedInfoArray[category name];

                 },


                align: 'right'
              }
            },

/**********************************************************/


    Highcharts.chart('chartContainer', {
            chart: {
              type: 'bar'
            },
            title: {
              text: ''
            }

            legend: {
              maxHeight: 40,
              itemWidth: 100,
              itemStyle: {
                color: '#FFF',
                fontWeight: 'bold',
                fontSize: 10
              }
            },
            xAxis: {
              categories: categories
            },
            yAxis: {
              min: 0,
              title: {
                text: ''
              },
              stackLabels: {
                enabled: true,
                align: 'right',
                style: {
                  color: 'green',
                  fontWeight: 'bold'
                }


                formatter: function () {
                   return usedInfoArray[xaxis value];

                 },


                align: 'right'
              }
            },

            plotOptions: {
              series: {
                stacking: 'normal',
                pointWidth: 10,
                groupPadding: 0.2


              },
              dataLabels: {
                formatter: function () {
                  var dataLabel = this.x;
                  if (dataLabel.length > 10) {
                    dataLabel = dataLabel.substring(0, 10);
                  }
                  return dataLabel;
                },
                enabled: true
              }
            },
            tooltip: {
              headerFormat: '<b>{point.x}</b><br/>',
              pointFormat: function () {
                return usedInfoArray[point.x];
              }
            },
            series: [{
              name: 'Free',
              'color': '#FFCC66',
              data: freeData
            }, {
              name: 'Used',
              'color': '#663399',
              data: usedData
            }]
          });
pbhle
  • 2,856
  • 13
  • 33
  • 40

1 Answers1

4

You can access to the x axis category name indirectly through the chart:

yAxis: {
  stackLabels: {
    enabled: true,
    align: 'right',
    formatter: function() {
      var xValue = this.x,
        xAxis = this.axis.chart.xAxis[0];

      return xAxis.categories[xValue];
    }
  }
}

Live demo: https://jsfiddle.net/BlackLabel/g68xphmf/

ppotaczek
  • 36,341
  • 2
  • 14
  • 24