We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Doughnut Chart - Recalculating visible series percetanges

I am using the ToggleSeriesVisibility option for a Doughnut chart.  I want to recalculate the percentage labels for each remaining visible series point.  

However when i loop each series points its always returning true for its visible state (see yellow highlighted code).  Am I using the wrong property?

function pieChartSeriesChange(args) {
    var series = args.model.series;
    for (var i = 0; i < series.length; i++) {
        var total = 0;

        //Calculate total value 
        for (var j = 0; j < series[i].points.length; j++) 
             if (series[i].points[j].visible ) { total += series[i].points[j].y; }
        for (j = 0; j < series[i].points.length; j++)
            series[i].points[j].text = series[i].points[j].x + ':- ' + (series[i].points[j].y / total * 100).toFixed(2) + '%';

3 Replies

DD Dharanidharan Dharmasivam Syncfusion Team November 25, 2016 01:36 PM UTC

Hi Matthew, 

Thanks for using Syncfusion product. 

We have analyzed your query. Since the visible property in points is a public API, we can’t override its value in source while toggle the visibility by clicking legend. But you can get this in _visibility in the point as an work around. And also you can reject the hidden point of a series to find the total using the below code snippet, since the hidden point will not be taken in account for finding overall percentage. 


function pieChartSeriesChange(args) { 
        var series = args.model.series; 
        for (var i = 0; i < series.length; i++) { 
            var total = 0; 
            //Calculate total value 
            for (var j = 0; j < series[i].points.length; j++) { 
                if (series[i].points[j]._visibility == "visible" && args.data.legendItem.LegendItem.PointIndex != j)  
                    total += series[i].points[j].y; 
            for (j = 0; j < series[i].points.length; j++) 
                series[i].points[j].text = series[i].points[j].x + ':- ' + (series[i].points[j].y / total * 100).toFixed(2) + '%'; 

For your reference, we have attached the sample. Kindly find the sample from below location, 

MH Matthew Holdsworth November 25, 2016 02:14 PM UTC

Thanks for the info,

I changed the process I changed the process slightly by using the event Series Rendering and removing the additional check you add rgs.data.legendItem.LegendItem.PointIndex != j

DD Dharanidharan Dharmasivam Syncfusion Team November 28, 2016 10:10 AM UTC

Hi Matthew, 
Thanks for your update.  
Kindly revert us, if you need further assistance on this.  


Live Chat Icon For mobile
Up arrow icon