Hide Pie Chart Category on Legend Click

Updated on Sep 2, 2026

Environment

Product

Chart for Blazor

Description

This KB shows how to toggle (hide and show) a Blazor Pie Chart category (segment item) when the user clicks on a legend item.

The same approach applies to Donut Charts too.

Solution

1. Implement a Pie Chart model property, which determines the category visibility. In the example below, that's Visible.
2. Define the Pie Chart Value and Color model properties so that they depend on Visible. When the category is not visible, the value must be zero and the color can be gray or some other neutral color.
3. Use the Chart OnLegendItemClick event to toggle the Visible property of the data item. Use ChartLegendItemClickEventArgs.Text from the event argument to determine the data item.
4. Use a ChartSeriesLabels Template to render null label text when the category is not visible. This aims to hide the zero value label of the category.
5. (optional) Change the legend item text of hidden categories, if a neutral color is not enough for the users.

Hide Pie Chart Category on Legend Click

<TelerikChart OnLegendItemClick="@OnPieLegendItemClick"
              Transitions="false">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Pie"
                     Data="@PieData"
                     Field="@nameof(PieModel.Value)"
                     CategoryField="@nameof(PieModel.Category)"
                     ColorField="@nameof(PieModel.Color)">
            <ChartSeriesLabels Template="pieSeriesLabelTemplate"
                               Visible="true" />
        </ChartSeries>
    </ChartSeriesItems>

    <ChartTitle Text="Chart Title" />

    <ChartLegend Position="ChartLegendPosition.Right">
        @* <ChartLegendLabels Template="pieLegendLabelTemplate" /> *@
    </ChartLegend>
</TelerikChart>

<script suppress-error="BL9992">
    /*function pieLegendLabelTemplate(context) {
        if (context.dataItem.Visible) {
            return context.text;
        } else {
            return context.text + " (*)";
        }
    }*/

    function pieSeriesLabelTemplate(context) {
        if (context.value > 0) {
            return context.value;
        } else {
            return null;
        }
    }
</script>

@code {
    #nullable enable

    private List<PieModel> PieData = new List<PieModel>
    {
        new PieModel
        {
            Category = "Mobile Phones",
            OriginalValue = 20
        },
        new PieModel
        {
            Category = "Tablets",
            OriginalValue = 11
        },
        new PieModel
        {
            Category = "Laptops",
            OriginalValue = 16
        },
        new PieModel
        {
            Category = "Computers",
            OriginalValue = 13
        },
        new PieModel
        {
            Category = "Accessories",
            OriginalValue = 17
        }
    };

    private void OnPieLegendItemClick(ChartLegendItemClickEventArgs args)
    {
        PieModel? segment = PieData.FirstOrDefault(x => x.Category == args.Text/*.Replace(" (*)", "")*/);

        if (segment != null)
        {
            segment.Visible = !segment.Visible;
        }
    }

    public class PieModel
    {
        public string Category { get; set; } = string.Empty;
        public string? Color => Visible ? null : "#eee";
        public double OriginalValue { get; set; }
        public double? Value => Visible ? OriginalValue : 0;
        public bool Visible { get; set; } = true;
    }
}

See Also

• Pie Chart