Colouring a RadPieChart

[Andrew]

Is there a way to manually set the colour of each slice in the piechart?

[Petar Kirov]

Hi Andrew,

You can use the PieSeries.SeriesStyles collection to define Styles for the pie slices. Since internally the pie slices are drawn with a Path objects, the collection is of styles which each style should target the Path type and specify values for the Path's properties. Here is an example: 

<telerik:RadPieChart>
   <telerik:PieSeries>
      <telerik:PieSeries.SeriesStyles>
         <Style TargetType="Path">
            <Setter Property="Fill" Value="Orange"/>
         </Style>
         <Style TargetType="Path">
            <Setter Property="Fill" Value="Gray"/>
         </Style>
         <Style TargetType="Path">
            <Setter Property="Fill" Value="Cyan"/>
         </Style>
         <Style TargetType="Path">
            <Setter Property="Fill" Value="Purple"/>
         </Style>
         <Style TargetType="Path">
            <Setter Property="Fill" Value="Green"/>
         </Style>
      </telerik:PieSeries.SeriesStyles>
      <telerik:PieSeries.DataPoints>
         <telerik:PieDataPoint Value="10"/>
         <telerik:PieDataPoint Value="4"/>
         <telerik:PieDataPoint Value="7"/>
         <telerik:PieDataPoint Value="11"/>
         <telerik:PieDataPoint Value="15"/>
      </telerik:PieSeries.DataPoints>
   </telerik:PieSeries>
</telerik:RadPieChart>

I hope this helps.
 
Greetings,
Petar Kirov
the Telerik team

[Andrew]

Is there away to set the style of a specific datapoint in c#?

[Petar Kirov]

Hi Andrew,

Yes it possible to set the style of a specific data point. This is achieved by creating a SliceStyleSelector and telling the Pie Series to use it. For example if the underlying data object has a property color of type SolidColorBrush, you can directly set the Path.Fill using it: 

public class CustomSelector : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
    {
        var dataPoint = item as PieDataPoint;
        var dataItem = dataPoint.DataItem as ChartData;

        Style style = new Style(typeof(Path));

        //Setting the pie slice color:
        style.Setters.Add(new Setter(Path.FillProperty, dataItem.Color));

        style.Setters.Add(
         new Setter(Path.StrokeProperty, new SolidColorBrush(Colors.White)));

        return style;
    }
}

The XAML: 

<Grid x:Name="LayoutRoot">
    <Grid.Resources>
        <local:CustomSelector x:Name="selector"/>
    </Grid.Resources>
    <telerik:RadPieChart x:Name="chart">
        <telerik:PieSeries ItemsSource="{Binding}" ValueBinding="Value"
     SliceStyleSelector="{StaticResource selector}"/>
    </telerik:RadPieChart>

Greetings,
Petar Kirov
the Telerik team

[Igor]

Where is ChartData? I get message "Cannot resolve symbol 'ChartData'".

[Martin Ivanov]

Hi Igor,

The ChartData class is not part of the Charting assembly. This is the custom business class that stands behind the data point (the view model of the DataPoint). This is the class of the objects which are used for populating the chart.

You can take a look at the Create Data-Bound Chart help article that demonstrates populating the chart's series with custom objects. In the article the "Product" class is the custom business object and it is stored in the DataItem property of its corresponding DataPoint.

Regards,
Martin
Telerik