BAWGroup
Posts: 10
Joined: Sun Dec 10, 2017 4:37 am

Tooltip Running Total - Stacked Bar Chart

Is it possible to add a running total to the tooltip with Highcharts cloud? For Example lets say the firsts data point in my Y Xis is 100 and the next is 3. The tooltip will show 100 when hovering over that portion of the bar but when hovering over the 3 will only show 3 and I would like it to show 103 or possibly just 3 and also the total of 103.
ppotaczek
Posts: 751
Joined: Mon Oct 02, 2017 3:12 pm

Re: Tooltip Running Total - Stacked Bar Chart

Hi BAWGroup,

It is possible, I implemented this type of functionality by using pointFormatter function for tooltip.

Code: Select all

  tooltip: {
    headerFormat: '',
    pointFormatter: function() {
      let result = 0;
      for (let i = this.index; i >= 0; i--) {
        result += this.series.chart.series[0].data[i].y;
      }
      return 'Actual value: ' + this.y + '<br> Running total: ' + result.toFixed(1)
    }
  },
I hope that I understood you correctly.

Live demo: http://jsfiddle.net/40wjhgth/
API Reference: https://api.highcharts.com/highcharts/t ... tFormatter

Best regards!
Paweł Potaczek,
Highcharts Developer
BAWGroup
Posts: 10
Joined: Sun Dec 10, 2017 4:37 am

Re: Tooltip Running Total - Stacked Bar Chart

Thank you ppotaczek. This is almost what I nned. I seem to be having a few issues though.

Image

The "Actual Value" is reporting properly. But the running total is not. In the picture above It shows the running total of that step at 2096825.0 when on the right we can see that the entire bar itself only has a value of 131303.
ppotaczek
Posts: 751
Joined: Mon Oct 02, 2017 3:12 pm

Re: Tooltip Running Total - Stacked Bar Chart

Hi BAWGroup,

I changed the code a bit to adapt to stacked series and it works correctly.
Perhaps in your example, strings are added. Please prepare live example, if you still have this problem.

Code: Select all

  yAxis: {
    min: 0,
    reversedStacks: false
  },
  tooltip: {
    headerFormat: '',
    pointFormatter: function() {
      let result = 0;
      for (let i = this.series.index; i >= 0; i--) {
        result += this.series.chart.series[i].data[0].y;
      }
      return 'Actual value: ' + this.y + '<br> Running total: ' + result.toFixed(1)
    }
  },
Live demo: http://jsfiddle.net/23a3hrvr/
API Reference: https://api.highcharts.com/highcharts/y ... rsedStacks

Best regards!
Paweł Potaczek,
Highcharts Developer
BAWGroup
Posts: 10
Joined: Sun Dec 10, 2017 4:37 am

Re: Tooltip Running Total - Stacked Bar Chart

New code is reporting "Actual Value" properly but the running total is "0". I don't see where I can export it to JS for jsfiddle but here is a copy of teh edit link.

https://cloud.highcharts.com/edit/141466
ppotaczek
Posts: 751
Joined: Mon Oct 02, 2017 3:12 pm

Re: Tooltip Running Total - Stacked Bar Chart

Hi BAWGroup,

I created only example of working functionality of this type, which required customization. Now this code should work with your project:

Code: Select all

  yAxis: {
    min: 0,
    reversedStacks: false
  },
  tooltip: {
    headerFormat: '',
    pointFormatter: function() {
      let result = 0;
      for (let i = this.series.index; i >= 0; i--) {
        result += this.series.chart.series[i].data[this.index].y;
      }
      return 'Actual value: ' + this.y + '<br> Running total: ' + result.toFixed(1)
    }
  }
Best regards!
Paweł Potaczek,
Highcharts Developer
BAWGroup
Posts: 10
Joined: Sun Dec 10, 2017 4:37 am

Re: Tooltip Running Total - Stacked Bar Chart

Perfect! Thank you so much for the help.

Return to “Highcharts Cloud”