Pie chart: How to setting series label foreground color same as series color

[minh]

Hi Telerik team,

I would like to have the foreground of the series labels same as the series color.

Below picture is the expected result:

 

Would you please help me how to obtain this?

Many thanks,

Minh Tuan.

[Stenly]

Hello Minh,

To achieve the wanted look, you could add a new ChartSeriesLabelDefinition to the LabelDefinitions collection property of the desired PieSeries. Then, set a new DataTemplate for the Template property of the ChartSeriesLabelDefinition definition, with a TextBlock control inside. After that, you could create a new converter and set it to the Foreground property of the TextBlock element. The converter will receive a PieDataPoint element and you could retrieve its series instance by casting its Presenter property to type ChartSeries. Finally, through the casted series, you could get the Fill property of the current PieDataPoint element present in the GlobalEntries collection of the applied Palette, and return it. This converter can also be found in the Label Connectors article from our documentation, where its exact location is under Example 3.

However, with only this implemented, the label will be the same color as the PieDataPoint and will appear as invisible (as it will be inside the PieDataPoint). To change this, you could utilize the Smart Labels feature and set its DisplayMode, for example, to Outside.

The following code snippets show this approach's implementation:

<telerik:RadPieChart Palette="Windows8">
    <telerik:RadPieChart.SmartLabelsStrategy>
        <telerik:PieChartSmartLabelsStrategy DisplayMode="Outside"/>
    </telerik:RadPieChart.SmartLabelsStrategy>
    <telerik:RadPieChart.Series>
        <telerik:PieSeries>
            <telerik:PieSeries.DataPoints>
                <telerik:PieDataPoint Label="43.46%" Value="43.46"/>
                <telerik:PieDataPoint Label="27.53%" Value="27.53"/>
                <telerik:PieDataPoint Label="15.11%" Value="15.11" />
                <telerik:PieDataPoint Label="10.35%" Value="10.35" />
                <telerik:PieDataPoint Label="3.55%" Value="3.55" />
            </telerik:PieSeries.DataPoints>
            <telerik:PieSeries.LabelDefinitions>
                <telerik:ChartSeriesLabelDefinition Margin="3">
                    <telerik:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <TextBlock Text="{Binding Label}" Foreground="{Binding Converter={StaticResource dataPointToBrushConverter}}" Margin="2 0 2 1" FontSize="16" />
                        </DataTemplate>
                    </telerik:ChartSeriesLabelDefinition.Template>
                </telerik:ChartSeriesLabelDefinition>
            </telerik:PieSeries.LabelDefinitions>
        </telerik:PieSeries>
    </telerik:RadPieChart.Series>
    <telerik:RadPieChart.Behaviors>
        <telerik:ChartSelectionBehavior />
    </telerik:RadPieChart.Behaviors>
</telerik:RadPieChart>

public class DataPointToBrushConverter : IValueConverter
{
    public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        DataPoint dp = value as DataPoint;
        if (dp == null)
        {
            return null;
        }

        var series = (ChartSeries)dp.Presenter;
        ;
        return series.Chart.Palette.GlobalEntries[dp.Index].Fill;
    }

    public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new System.NotImplementedException();
    }
}

This will produce the following result:

 

To get as close as possible to the result from the provided image, you could wrap the TextBlock element with a Border element, inside the Template property of the LabelDefinition, and bind the provided converter to its BorderBrush property. Also, you could utilize the Label Connectors feature, which will draw lines from the PieDataPoint element to the Label (the above article contains information on how to color the connectors the same way as the PieDataPoint elements). Changing the DisplayMode property of the PieChartSmartLabelsStrategy instance to Spider, will position the Connectors and Labels in the same way as in the provided image.

The result will be as follows:

With that said, I have attached a sample project, so, could you give it a try?

Regards,
Stenly
Progress Telerik

[minh]

Thank you very much Stenly for your solution.

I'm going to implement this solution and let you know the result.

[minh]

Hi Stenly,

Your solution work perfectly!

Thank you very much!

Best regards,

Minh Tuan