CODEWITHSUNDEEP
javascripthighcharts
Morgs
Morgs

Reputation: 1746

High (Pie) Charts Incorrect Calculation

can someone please help me understand why my pie charts percentage calculation is incorrect? See screenshot:

enter image description here

According to my calculation the spend % is supposed to be 24.73% as seen on the RHS. The values passed to Highcharts are as follows: - Spend: 204827099.36 - Budget: 828095192.11

My calculation is as follows (Spend/Budget) * 100: (204827099.36/828095192.11)*100=24.73%

Here's how I've specified these values in the highchart:

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.2f} %',
            style: {
                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
        },
        showInLegend: true
    }
},
series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Budget',
        color: '#1e80c1',
        y: parseFloat(828095192.11)
    }, {
        name: 'Spend',
        color: '#fdc942',
        y: parseFloat(204827099.36)
    }]
}]

Is there something that I am doing wrong? Thanks in advance..

Upvotes: 0

Views: 89

Answers (1)

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

You are directly dividing one by the other, however you should divide it by total:

204827099.36/(828095192.11+204827099.36) =~ 0.1983

The library is correct. I guess you want the blue part to show what is remaining after 204827099.36, in that case you should pass it like this:

series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
        name: 'Budget',
        color: '#1e80c1',
        y: parseFloat(623268092.75)
    }, {
        name: 'Spend',
        color: '#fdc942',
        y: parseFloat(204827099.36)
    }]
}]

Then it will give you the percentage that you want, but is it what you want?

Upvotes: 2

Related Questions