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

Tooltip Running Total - Stacked Bar Chart

Mon Dec 18, 2017 7:45 am

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: 743
Joined: Mon Oct 02, 2017 3:12 pm

Re: Tooltip Running Total - Stacked Bar Chart

Mon Dec 18, 2017 5:22 pm

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: 7
Joined: Sun Dec 10, 2017 4:37 am

Re: Tooltip Running Total - Stacked Bar Chart

Mon Dec 18, 2017 9:39 pm

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: 743
Joined: Mon Oct 02, 2017 3:12 pm

Re: Tooltip Running Total - Stacked Bar Chart

Tue Dec 19, 2017 12:24 pm

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: 7
Joined: Sun Dec 10, 2017 4:37 am

Re: Tooltip Running Total - Stacked Bar Chart

Wed Dec 20, 2017 6:36 am

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: 743
Joined: Mon Oct 02, 2017 3:12 pm

Re: Tooltip Running Total - Stacked Bar Chart

Wed Dec 20, 2017 9:54 am

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: 7
Joined: Sun Dec 10, 2017 4:37 am

Re: Tooltip Running Total - Stacked Bar Chart

Wed Dec 20, 2017 10:28 am

Perfect! Thank you so much for the help.

Return to “Highcharts Cloud”