russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

Hello again Wojtek,

I need to modify this to show the percentage of the x series of data. For this example the total percentage would be for the 2 x points of data in the column. For example column "Jun" Customer Owned would be 90% and Supplier Owned would be 10% (totaling 100%). Is this possible to do with this same code? I tried switching point.y to point.x and this.y to this.x but that doesn't work and returns NaN%
wojtek wrote:Hi russelln,

To find the percentage of each point in tooltip:

1. Count all series data values on chart load event and add it to the series object:

Code: Select all

    chart: {
      events: {
      	load: function() {
          var chart = this;
          chart.series.forEach(function(series) {
          	series.pointsSum = 0;
          	series.data.forEach(function(point) {
            	series.pointsSum += point.y;
            });
          });
        }
      }
}

2. Use tooltip.formatter function to count percentage for each series point:

Code: Select all

    tooltip: {
      formatter: function() {
      	var percentage = ((this.y / this.series.pointsSum) * 100).toFixed(2);
        return percentage + '%';
      }
    }
Api reference: https://api.highcharts.com/highcharts/tooltip.formatter
Online demo: http://jsfiddle.net/wchmiel/57Ldakh0/

Best regards.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

Hi russelln,

I'm not sure I understood you clearly. Check this demo: http://jsfiddle.net/wchmiel/a52me138/. Is it what you need? If not could you explain me more precisely what do you want to achieve?

Regards.
Wojciech Chmiel
Highcharts Developer
russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

You are a genius! This is exactly what I needed. Thank you.
Is there any way to display 0% instead of NaN% when the data is all zeroes?
Look at this example, mouse-over first series of data to see the NaN%
http://jsfiddle.net/a52me138/2/
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

Yes of course. Check the demo: http://jsfiddle.net/wchmiel/a52me138/8/.

Regards.
Wojciech Chmiel
Highcharts Developer
russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

Perfect! Thank you for all your help, I really appreciate it.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

You're welcome :wink:
Wojciech Chmiel
Highcharts Developer
russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

I am having a problem with this code in IE (Internet Explorer). My web page doesn't display the chart, and even the JSfiddle demo (below) doesn't work, I get a bouncing blue cloud with infinity sign on it.
wojtek wrote:Yes of course. Check the demo: http://jsfiddle.net/wchmiel/a52me138/8/.
I tested on Edge, Chrome and Firefox, and it works in all 3. But for some reason it doesn't work in IE (Internet Explorer). Do you know why? Please help?

Thank you,
Russ
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

russelln,

We tested it on IE11 and it works, what version of IE are you using?. In the example I posted you previously I used arrow function from ES6 which is not supported on IE. Have you changed it maybe? Check it with the code from demo attached below (now it doesn't have the ES6 code).

P.S. Jsfiddle is not working on IE at all, try codepen it should work partially (at least display the chart).

Demo:
http://jsfiddle.net/wchmiel/jmq9kzdu/

Kind regards.
Wojciech Chmiel
Highcharts Developer
russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

I am using IE11. I tried your modified code and it works! Thank you very much.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

I'm happy to hear that.

Regards.
Wojciech Chmiel
Highcharts Developer
russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

Hello again,

I am working on a new chart with 3 series of data. I need the mouse-over (tooltip) to show 100% for the "Total" (red) line while the "A" (green) line and "B" (blue) line show two percentages that total 100%. Is this possible? So basically I only want to consider the "A" and "B" lines for the total percentage, The "TOTAL" line will be ignored.

Here is an example chart I am working on.
http://jsfiddle.net/jmq9kzdu/7/

Thank you in advance,
Russ
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

Hi russelln,

Yes, of course, it's possible. You will have to sum all series without "total" series and then count percentage from this sum. Check demo I posted below.

Demo:
http://jsfiddle.net/wchmiel/x6Lgop15/1/

Kind regards.
Wojciech Chmiel
Highcharts Developer
russelln
Posts: 20
Joined: Fri Jul 01, 2016 9:14 pm

Re: Newbie needs help!

Brilliant! Is there anything you cannot do? Thank you very much.
wojtek
Posts: 433
Joined: Tue Jul 03, 2018 12:32 pm

Re: Newbie needs help!

You're welcome :wink:

Have a nice day!
Wojciech Chmiel
Highcharts Developer

Return to “Highcharts Usage”