-1

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:

Simulation...

Peter Haddad
  • 78,874
  • 25
  • 140
  • 134
Medina
  • 47
  • 2
  • 4
  • http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/yaxis/stacklabels-style/ – Medina Apr 23 '18 at 16:22
  • [FAQ on how to question on stackoverflow](https://stackoverflow.com/help/asking) and [Make it Minimal, Complete and Verfiable Example(MCVE)](https://stackoverflow.com/help/mcve) – Morse Apr 23 '18 at 16:38

1 Answers1

0

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:

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

daniel_s
  • 3,635
  • 1
  • 8
  • 24
  • And if it's 3 data in the column, how would I have to do the thirdLabel? – Medina Apr 24 '18 at 19:49
  • @Medina, when there is a three data points in a stack you can just add another variable equal to `points[1][0]`, show it in returning string and increase `y` value to make bigger shift of labels. Here is the example: http://jsfiddle.net/vbqaa2g2/ – daniel_s Apr 25 '18 at 10:40
  • but the secondLabel is showing the sum value of it with the thirdLabel – Medina Apr 25 '18 at 15:43
  • You're right, my mistake. Here is the correct formula - `this.points[1][1] - this.points[1][0]` and live example: http://jsfiddle.net/vbqaa2g2/1/ – daniel_s Apr 25 '18 at 16:58