CODEWITHSUNDEEP
c#.nethighcharts
Daniel
Daniel

Reputation: 139

C# DotNet.Highcharts Column datalabel percentage

Would somebody kindly explain to me why this does not work. I want to display both the value and the percentage on top of the column but, using the below returns NaN for the percentage value.

Below is the data returned. 

    xAxis: { categories: ['a', 'b', 'c', 'd', 'e', 'f'] }, 
    series: [{ data: [1, 4, 3, 7, 10, 1], name: 'Value' }]

.SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Enabled = true,
                        Formatter = "function() { var dataSum = 0; for (var i = 0; i < this.series.data.length; i++) { dataSum += this.series.data[i] }; var pcnt = (this.y / dataSum) * 100; return '<b>Value</b>: ' + this.point.y + '<br/>' + '<b>Percent</b>: ' + pcnt + '%'; }"
                    }
                }
            })

Upvotes: 0

Views: 910

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

The problem is with this part of your code:

dataSum += this.series.data[i]

Right now you are trying to sum points.. but I'm pretty sure you want to sum points' y-values:

dataSum += this.series.data[i].y

Demo: http://jsfiddle.net/Ywr3L/41/

Extra note:

You will get long numbers, try to display pcnt.toFixed(2) instead of pcnt in function's return.

Upvotes: 2

Raein Hashemi
Raein Hashemi

Reputation: 3384

I think dataSum is still 0.

this.series.data.length and this.series.data[i] are undefined. Use this.series[0].data.length and this.series[0].data[i] instead.

Upvotes: 2

Related Questions