Hide Zero Segments Labels in PieChart

There are different ways to hide/remove the labels of the zero segments inside PieChart. This article will describe how to hide them by setting the Opacity property of the TextBlock which holds the label. Example 1 demonstrate a basic scenario where the label of the zero segments will appear.

Example 1: Declaring PieSeries in XAML

<telerik:RadPieChart Palette="Windows8"> 
    <telerik:PieSeries ValueBinding="Value" > 
        <telerik:PieSeries.DataPoints> 
            <telerik:PieDataPoint  Value="43.46"/> 
            <telerik:PieDataPoint  Value="27.53"/> 
            <telerik:PieDataPoint  Value="15.11"/> 
            <telerik:PieDataPoint  Value="10.35"/> 
            <telerik:PieDataPoint  Value="0"/> 
        </telerik:PieSeries.DataPoints>                 
        <telerik:PieSeries.LabelConnectorsSettings> 
            <telerik:ChartSeriesLabelConnectorsSettings/> 
        </telerik:PieSeries.LabelConnectorsSettings>                 
        <telerik:PieSeries.LabelDefinitions> 
            <telerik:ChartSeriesLabelDefinition Margin="-20"> 
                <telerik:ChartSeriesLabelDefinition.Template> 
                    <DataTemplate> 
                        <TextBlock Text="{Binding Value}" /> 
                    </DataTemplate> 
                </telerik:ChartSeriesLabelDefinition.Template> 
            </telerik:ChartSeriesLabelDefinition> 
        </telerik:PieSeries.LabelDefinitions> 
    </telerik:PieSeries> 
</telerik:RadPieChart> 

The next step is to bind the Opacity property to the slice value and apply custom IValueConverter class. In the Convert() method you can get the current value. If the value is zero you can return 0 to hide the label.

Example 2: Custom IValueConverter

public class OpacityConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        double slicesValue = double.Parse(value.ToString()); 
        if( slicesValue == 0 ) 
        { 
            return 0; 
        } 
        return 1; 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 

Example 3: Apply the IValueConverter to the Opacity property binding

<Window.Resources> 
    <local:OpacityConverter x:Key="OpacityConverter"/> 
</Window.Resources> 
<Grid> 
    <telerik:RadPieChart Palette="Windows8"> 
        <telerik:PieSeries ValueBinding="Value" > 
            <telerik:PieSeries.DataPoints> 
                <telerik:PieDataPoint  Value="43.46"/> 
                <telerik:PieDataPoint  Value="27.53"/> 
                <telerik:PieDataPoint  Value="15.11"/> 
                <telerik:PieDataPoint  Value="10.35"/> 
                <telerik:PieDataPoint  Value="0"/> 
            </telerik:PieSeries.DataPoints> 
            <telerik:PieSeries.LabelConnectorsSettings> 
                <telerik:ChartSeriesLabelConnectorsSettings/> 
            </telerik:PieSeries.LabelConnectorsSettings> 
            <telerik:PieSeries.LabelDefinitions> 
                <telerik:ChartSeriesLabelDefinition Margin="-20"> 
                    <telerik:ChartSeriesLabelDefinition.Template> 
                        <DataTemplate> 
                            <TextBlock Text="{Binding Value}" Opacity="{Binding Value,Converter={StaticResource OpacityConverter}}"/> 
                        </DataTemplate> 
                    </telerik:ChartSeriesLabelDefinition.Template> 
                </telerik:ChartSeriesLabelDefinition> 
            </telerik:PieSeries.LabelDefinitions> 
        </telerik:PieSeries> 
    </telerik:RadPieChart> 
</Grid> 

The label is now hidden but the label connector is still visible. To remove the connector you can create a custom class which derives from PieSeries and override the GetLabelConnector() method (as demonstrated in this article)

Example 4: Override the GetLabelConnector method of PieSeries

public class CustomPieSeries : PieSeries 
{ 
    protected override List<Point> GetLabelConnector(ChartSeriesLabelPositionInfo info) 
    { 
        var label = info.DataPoint.Label.ToString(); 
        if(label == "0%") 
        { 
            return new List<Point>() { new Point(), new Point() }; 
        }            
        return base.GetLabelConnector(info); 
    } 
} 
Now you can just replace the PieSeries in Example 3 with your custom class.

Example 5: Replace the PieSeries with the custom class

<Window.Resources> 
    <local:OpacityConverter x:Key="OpacityConverter"/> 
</Window.Resources> 
<Grid> 
    <telerik:RadPieChart Palette="Windows8"> 
        <local:CustomPieSeries ValueBinding="Value" > 
                <local:CustomPieSeries.DataPoints> 
                <telerik:PieDataPoint  Value="43.46"/> 
                <telerik:PieDataPoint  Value="27.53"/> 
                <telerik:PieDataPoint  Value="15.11"/> 
                <telerik:PieDataPoint  Value="10.35"/> 
                <telerik:PieDataPoint  Value="0"/> 
            </local:CustomPieSeries.DataPoints> 
                <local:CustomPieSeries.LabelConnectorsSettings> 
                <telerik:ChartSeriesLabelConnectorsSettings/> 
            </local:CustomPieSeries.LabelConnectorsSettings> 
                <local:CustomPieSeries.LabelDefinitions> 
                <telerik:ChartSeriesLabelDefinition Margin="-20"> 
                    <telerik:ChartSeriesLabelDefinition.Template> 
                        <DataTemplate> 
                            <TextBlock Text="{Binding Value}" Opacity="{Binding Value,Converter={StaticResource OpacityConverter}}"/> 
                        </DataTemplate> 
                    </telerik:ChartSeriesLabelDefinition.Template> 
                </telerik:ChartSeriesLabelDefinition> 
            </local:CustomPieSeries.LabelDefinitions> 
        </local:CustomPieSeries> 
    </telerik:RadPieChart> 
</Grid> 

See Also

In this article
Not finding the help you need? Improve this article