CODEWITHSUNDEEP
javascriptjqueryhighcharts
Jose LHS
Jose LHS

Reputation: 177

Highcharts shared tooltip making a percentage difference between series

I'm new using Highcharts and I have a chart with 7 series. Those series shows prices and now I need to show in the main chart tooltip the percentage difference between the prices of the main chart and just another one. I was watching how to format the tooltip but I can't find how to solve this, maybe is easy or maybe not, so your help will be so appreciated.

Here you can see an example of my code:

series: [{
                name: "User Price",
                type:'line',
                data: JSON.parse(data)
            },
            {
                type: 'line',
                name: 'Average Price',
                color: "#E82315",
                dataLabels: false,
                visible: true,
                data: JSON.parse(precio_medio)
            },
            {
                type: 'line',
                name: 'Other Price',
                color: "#CC8604",
                visible: false,
                dataLabels: false,
                data: [0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,
                       0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884]
            },
            {
                type: 'line',
                name: 'Other Price 2',
                color: "#F29D00",
                visible: false,
                dataLabels: false,
                data: [0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368
                       ,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368]
            }]

And I want to show in the tooltip the percentage difference between the User Price and the Average price.

Thanks you all in advance.

Upvotes: 0

Views: 518

Answers (1)

Nishith Kant Chaturvedi
Nishith Kant Chaturvedi

Reputation: 4769

Try This 

  formatter:function() {                  

       var pointPct='';
                var baseValue= this.points[0].point.y;
                 var tooTipTxt='';
                 console.log(baseValue);
    $.each(this.points, function(i, point) {            
        pointPct = (point.y)*100/baseValue;
        tooTipTxt   +=   "<span>"+pointPct+"</span> "

    });

     return tooTipTxt;
            }

Upvotes: 1

Related Questions