Pie Chart - Hide pieces of the pie chart that are 0

[Steven]

Good Afternoon,

I have the following pie chart:

Since Funerals is the only item that has any data, how can I display the chart without the Weddings label on the chart and the different color lines? Also I want my legend to appear like the legend in the expense tracker example:

How can I achieve this?

This is my code so far:

(Controller)

List<DoughnutChartData> chartDataDoughnut = new List<DoughnutChartData>

            {

                new DoughnutChartData { xValue = "Funerals", yValue = funerals, text = (double)funerals/jobsCompleted.Count() * 100 + "%"},

                new DoughnutChartData { xValue = "Weddings", yValue = weddings, text = (double)weddings/jobsCompleted.Count() * 100 + "%"},

                new DoughnutChartData { xValue = "Regular Weekend", yValue = regularWeekend, text = (double)regularWeekend/jobsCompleted.Count() * 100 + "%"},

                new DoughnutChartData { xValue = "Holy Day", yValue = holyDay, text = (double)holyDay/jobsCompleted.Count() * 100 + "%"},

                new DoughnutChartData { xValue = "Other", yValue = other, text = (double)other/jobsCompleted.Count() * 100 + "%"},

            };

            ViewBag.dataSource = chartDataDoughnut;

(View)

 @(Html.EJS().AccumulationChart("container").Series(

series =>

{

    series.DataLabel(dl=>dl.Visible(true).Name("xValue").Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Inside).Font(ft => ft.FontWeight("600").Color("#ffffff"))).

         XName("xValue").

         YName("yValue").

         Name("Project").

         Radius("100%").

         DataSource(ViewBag.dataSource).

         StartAngle(0).

         EndAngle(360).

         InnerRadius("0%").Add();

}).EnableSmartLabels(true).Title("Breakdown of Masses Performed").LegendSettings(

legend =>

{

    legend.Height("190").Width("160").Position(Syncfusion.EJ2.Charts.LegendPosition.Bottom).Visible(true);

}).Tooltip(tl => tl.Enable(true)).Load("onChartLoad").LegendRender("onLegendRender").Render()

        )

<script>

    var percentage = [], length;

    var onChartLoad = function (args) {

        length = args.chart.series[0].dataSource.length;

        for (var i = 0; i < length; i++) {

            percentage.push(args.chart.series[0].dataSource[i].text);

        }

    };

    var count = 0;

    var onLegendRender = function (args) {

        if (count == length)

            count = 0;

        if (count <= length) {

            args.text = args.text + " " + percentage[count];

            count++;

Thanks,

Steven

        }

    };

</script>

[Durga Gopalakrishnan]

Hi Steven,

We have analyzed your query with attached screenshot and code snippet. We suggest you specify data labelShowZeroproperty as false to hide the zero labels. You can append the y value along with legend text using legendRender event. We have attached modified sample for your reference.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccChart-1599327928.zip

In expense tracker sample, we have used grid control to render the shape and texts. Please refer the below links to know more about grid.

UG Link : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/ 

Online Demo : https://ej2.syncfusion.com/aspnetmvc/Grid/DefaultFunctionalities#/material

Please revert us if you have any concerns.

Regards,

Durga G

[Steven]

Good Evening,

I'm still having trouble understanding how the legend in the Expense Tracker Example works. Do you have another example you can show me?

I created a data grid but I'm having trouble assigning the colored circles to the chart. This is what I have so far:

 @Html.EJS().Grid("Grid").DataSource((IEnumerable

[Durga Gopalakrishnan]

Hi Steven,

We suggest you use grid RowTemplate property to display the customized values. We have modified sample and attached for your reference. 

 @Html.EJS().Grid("container1").RowTemplate("#rowtemplate").Render()
<script id="rowtemplate" type="text/x-template">

    <tr style="height: 30px;">

        <td style="padding-left:130px">

            <div style="width: 16px; height: 16px; margin-left: 1px; border-radius: 16px; background:${color}"></div>

        </td>

        <td style="text-align:center;"> ${text} </td>

        <td style="text-align:center;"> ${yValue} </td>

        <td style="text-align:center;"> ${xValue} </td>

    </tr>

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridLegend1966463053.zip

Online Demo : https://ej2.syncfusion.com/aspnetmvc/Grid/RowTemplate#/material

Please revert us if you have any concerns.

Regards,

Durga G

[Steven]

Thank you so much for all of your help!

Sincerely,

Steven

[Durga Gopalakrishnan]

Hi Steven,

Most welcome. Please get back to us if you need any further assistance.

Regards,

Durga G

[Kerry Kerschbaumer]

Dear Syncfusion Team,

I have a similar problem in Blazor, but the Charts elements do not have a "ShowZero" property.

I have a stacked bar chart and "0" values are covering/hiding other values.

I checked in <ChartSeries>, <ChartMarker> and <ChartDataLabel> Elements but couldn't find a corresponding setting.

What would be the correct solution here?

Thanks

Klaus.

[Swetha Babu]

Hi Klaus, 

Greetings from Syncfusion. 

We do not have support for ShowZero property in Blazor Chart component currently. But, we can achieve your requirement by using the OnDataLabelRender event in Chart component. However, we have created the simple blazor application using the Stack Column sample to demonstrate the same and it can be downloaded from the below link. 

Sample link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample-88011945 

Code Snippet: 

<SfChart>         

       <ChartEvents OnDataLabelRender="LabelRender"></ChartEvents> 

</SfChart> 

@code { 

      void LabelRender(TextRenderEventArgs args) 

     { 

            if (args.Text == "0%") 

           { 

                 args.Text = String.Empty; 

           } 

     } 

} 

Screenshot: 

 

In the above sample, we have made the Zero hide by assigning the empty string to the text argument in TextRenderEventArgs. Please let us know if the above application meets your requirement.  

Kindly, revert us if you have any concerns. 

Regards, 

Swetha

[Kerry Kerschbaumer]

Hi Swetha,

Thanks alot, this is working perfrectly.

I also tried with <Template> inside the <ChartDataLabel> but that didn't work for some reason (showing no labels at all).

Thanks

Klaus.

[Swetha Babu]

Hi Klaus, 

Thank you for your update. 

We have considered the reported scenario as a bug and logged a defect report for the same. The fix for the reported scenario will be included in our weekly patch release which is expected to be rolled out on April 5^th 2022. Please find the below feedback link to keep track of the reported scenario. 

Feedback link: https://www.syncfusion.com/feedback/33386 

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards, 

Swetha

[Durga Gopalakrishnan]

Hi Klaus,

Thanks for being patience. We have fixed the reported issue and generated custom nuget with fixed changes. We request you to ensure your application by installing this custom nuget. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 12^th April 2022. We appreciate your patience until then.

Custom NuGet : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.Blazor.Charts.20.1.0.481373772923.zip

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Durga Gopalakrishnan]

Hi Klaus,

We are glad to announce that our v20.1.0.48 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor.Charts NuGet package.

NuGet Package : https://www.nuget.org/packages/Syncfusion.Blazor.Charts/

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.

Regards,

Durga Gopalakrishnan.

[Sam Konstas Smith]

Hi Steven,

You can hide categories with a zero value before sending them to the view. The usual way is to filter the list so the pie chart only receives items that actually have data. That way the chart won’t draw empty slices or labels, and the legend stays clean too.

For example, you can update your controller like this:

var rawData = new List<DoughnutChartData>
{
    new DoughnutChartData { xValue = "Funerals", yValue = funerals },
    new DoughnutChartData { xValue = "Weddings", yValue = weddings },
    new DoughnutChartData { xValue = "Regular Weekend", yValue = regularWeekend },
    new DoughnutChartData { xValue = "Holy Day", yValue = holyDay },
    new DoughnutChartData { xValue = "Other", yValue = other }
};

var chartDataDoughnut = rawData
    .Where(x => x.yValue > 0)
    .Select(x => new DoughnutChartData
    {
        xValue = x.xValue,
        yValue = x.yValue,
        text = ((double)x.yValue / jobsCompleted.Count() * 100).ToString("0.##") + "%"
    })
    .ToList();

ViewBag.dataSource = chartDataDoughnut;

Once you filter out empty categories, the chart only renders the slice that matters. Your legend will also stay clean, similar to the expense tracker example you mentioned.

A similar approach is often used in event-related dashboards too. In my case, I was checking some data for a wedding ring making workshop, and the chart only became useful once zero-value categories were removed. The same logic applies here. By cleaning the dataset before binding it to the chart, the output looks polished without any extra view-level hacks.

This should give you a simple and reliable fix.

[Durga Gopalakrishnan]

Hi Sam,

Thank you for sharing the approach. Filtering out zero-value categories before binding the data is indeed a clean and effective solution. This ensures the chart and legend remain clear without extra view-level adjustments.

Regards,

Durga Gopalakrishnan.