How to Style Pie Chart Dynamically

3 posts, 1 answers
  1. Sean
    Sean avatar
    2 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2012 Link to this post

    Hello,

    I am using MVVM to bind a PieChart to a collection called "Metrics" as shown below. The collection has a "Count" and a "Status" field. The status field is used on the legend, and based on the value in "Status" I would like to color that series a particular color.

    Could I add a color property to my "Metrics" collection and somehow bind the pie chart's series color to that property? I don't see anything that allows that in ItemMappings. If not, how else would someone recommend setting the color dynamically based on "Status?" Can I create a predefined map? Thanks.

    <chart:RadChart Grid.Row="1" ItemsSource="{Binding Metrics}" BorderThickness="0" >
        <chart:RadChart.SeriesMappings>
            <charting:SeriesMapping>
                <charting:SeriesMapping.SeriesDefinition>
                    <charting:PieSeriesDefinition />
                </charting:SeriesMapping.SeriesDefinition>
                <charting:ItemMapping FieldName="Count" DataPointMember="YValue" />
                <charting:ItemMapping FieldName="Status" DataPointMember="LegendLabel" />
            </charting:SeriesMapping>
        </chart:RadChart.SeriesMappings>
  2. Answer
    Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 28 Mar 2012 Link to this post

    Hi Sean,

    Thanks for contacting us.
    There is no need to create a new Color property. You can use the CustomItemStyleDelegate property as shown in this help topic and color the slices based on condition.

    Let me know if you need further assistance with this.

    Greetings,
    Evgenia
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Sean
    Sean avatar
    2 posts
    Member since:
    Mar 2012

    Posted 28 Mar 2012 Link to this post

    Thank you very much for your reply!
    I was able to use your example and get it working using the code below

    public MyPage()
    {
        InitializeComponent();
        this.chtMetrics.CreateItemStyleDelegate = BuildCustomItemStyle;
    }
    public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries)
    {
        Style newStyle = new Style(style.TargetType);
        newStyle.BasedOn = style;
        Brush brush;
        if (item is BaseChartItem)
        {
            switch(dataSeries[(item as BaseChartItem).CurrentIndex].LegendLabel)
            {
                case "FAILED":
                    brush = new SolidColorBrush(Colors.Red);
                    break;
                default:
                    brush = new SolidColorBrush(Colors.Green);
                    break;
            }
            newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
        }
        if (item is SeriesItemLabel)
        {
            switch ((item as SeriesItemLabel).DataPoint.LegendLabel)
            {
                case "FAILED":
                    brush = new SolidColorBrush(Colors.Red);
                    break;
                default:
                    brush = new SolidColorBrush(Colors.Green);
                    break;
            }
            newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, new SolidColorBrush(Colors.White)));
            newStyle.Setters.Add(new Setter(SeriesItemLabel.StrokeProperty, brush));
            newStyle.Setters.Add(new Setter(SeriesItemLabel.ForegroundProperty, new SolidColorBrush(Colors.Black)));
        }
        if (item is ChartLegendItem)
        {
            switch ((item as ChartLegendItem).Label)
            {
                case "FAILED":
                    brush = new SolidColorBrush(Colors.Red);
                    break;
                default:
                    brush = new SolidColorBrush(Colors.Green);
                    break;
            }
            newStyle.Setters.Add(new Setter(Path.FillProperty, brush));
        }
        return newStyle;
    }
Back to Top