Colouring a RadPieChart

7 posts, 0 answers
  1. Andrew
    Andrew avatar
    18 posts
    Member since:
    Sep 2012

    Posted 26 Sep 2012 Link to this post

    Is there a way to manually set the colour of each slice in the piechart?
  2. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 27 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  3. DevCraft banner
  4. Andrew
    Andrew avatar
    18 posts
    Member since:
    Sep 2012

    Posted 27 Sep 2012 Link to this post

    Is there away to set the style of a specific datapoint in c#?
  5. Petar Kirov
    Admin
    Petar Kirov avatar
    425 posts

    Posted 28 Sep 2012 Link to this post

    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

    Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

  6. Igor
    Igor avatar
    4 posts
    Member since:
    Dec 2014

    Posted 06 Jan 2015 in reply to Petar Kirov Link to this post

    Where is ChartData? I get message "Cannot resolve symbol 'ChartData'".
  7. Igor
    Igor avatar
    4 posts
    Member since:
    Dec 2014

    Posted 06 Jan 2015 in reply to Petar Kirov Link to this post

    Where is ChartData? I get message "Cannot resolve symbol 'ChartData'"
  8. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 07 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
DevCraft banner