stackLabels with separate data in Highcharts

Question

Good afternoon, I'm putting together a chart that uses Highcharts stackLabels, it's exactly the same as this: JSFiddle however I do not want it to display the sum of the column values, I want it to appear item by item one on top of the other, same as the print I simulated below:

Answer 1

In order to set your stackLabels as you expecting, you need to use stackLabels.formatter function to calculate the labels values manually.

Next thing you've to do is make a little shifting on the labels. You are able to do it by stackLabels.y field.

At the end, don't forget about the stackLabels.useHTML parameter set equal to true. It makes the <span> and </br> elements will appear correctly. Please take a look at code below:

yAxis: {
  stackLabels: {
    style: {
      color: 'red'
    },
    enabled: true,
    useHTML: true,
    formatter: function() {
      var firstLabel = Math.round((this.points[0][1] - this.points[0][0]) * 10) / 10,
        secondLabel = this.points[0][0]

      return `<span>${firstLabel}</span></br>
              <span>${secondLabel}</span>`
    },
    y: -15
  }
}

You can read more about parameters mentioned above here:

• https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter

• https://api.highcharts.com/highcharts/yAxis.stackLabels.y

• https://api.highcharts.com/highcharts/yAxis.stackLabels.useHTML

Live example: http://jsfiddle.net/r01nkgyn/