Changing Color of PieChart items

[Chris Thierry]

Hi, i'm trying to change the color of my pie chart items, I need to put an specific color for an specific item.
For example, if I'm loading fruits, I want to put the color red for apples, yellow for bananas and so on... but just for specific items, the rest I don't care, currently I'm using RadChart for Silverlight and I'm already applying Windows7 theme, I want to keep this theme but also I want to do my custom assign colors. I'm not using MVVM, do you have anything similar to this?
Thank you.

This is how I'm filling my chart:

SeriesMapping m = new SeriesMapping();
m.SeriesDefinition = new DoughnutSeriesDefinition();
m.ItemMappings.Add(new ItemMapping("Percentage", DataPointMember.YValue));
m.ItemMappings.Add(new ItemMapping("Provider", DataPointMember.LegendLabel));
m.SeriesDefinition.ItemLabelFormat = "#Y%";

m.SeriesDefinition.ShowItemToolTips = true;
m.SeriesDefinition.ItemToolTipFormat = "#Y%";

m.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Item;
m.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
m.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;

this.RadChartFruits.DefaultView.ChartLegend.BorderBrush = new SolidColorBrush(Colors.Transparent);

this.RadChartFruits.SeriesMappings.Clear();
this.RadChartFruits.SeriesMappings.Add(m);
this.RadChartFruits.ItemsSource = ((LoadOperation<Fruits>)sender).Entities.ToList();

Also, can I do this before render item to the page?
Thank you.

[Chris Thierry]

HI,
I need some help, because I coudn't find the solution yet.
Thank you.

[Sia]

Hello Chris Thierry,

Please try to use a custom delegate to style your doughnut slices depending on the name or the index. In my opinion this is exactly what you need. Please try this approach and let me know how it works on your end.

Best wishes,
Sia
the Telerik team

[Chris Thierry]

Thank you! I'm trying right now!
I'll let you know.
Thank you again

[Chris Thierry]

Ok, I was trying to do it, is working for changing each item, the problem is the Legend item... I don't know how to change it. I have an item with an specific color, but the legend item color is different... According to the example, the item is either a Doughnut or a SeriesItemLabel, how could I access to the legend item color?, here is my code:

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 Doughnut)
            {
                if (((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID == 7)
                {
                    brush = new SolidColorBrush(Colors.Blue);
                    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
                }
                if (((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID == 32)
                {
                    brush = new SolidColorBrush(Colors.Red);
                    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
                }
                if (((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID == 41)
                {
                    brush = new SolidColorBrush(Colors.Green);
                    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
                }
            }
            return newStyle;
        }

Thank you.

[Chris Thierry]

HI,
Please I need some help, I coudn't find the solution yet.
Thank you.

[Sia]

Hi Chris Thierry,

Please check the attached project which is an example how to achieve the needed.

The main point is that you need to have different conditions depending on the element:

if (control is BaseChartItem2D)
{
    newStyle.Setters.Add(new Setter(Shape.FillProperty, brush));
    newStyle.Setters.Add(new Setter(Shape.StrokeProperty, brush));
}

if (control is ChartLegendItem)
    newStyle.Setters.Add(new Setter(Path.FillProperty, brush));


if (control is SeriesItemLabel)
    newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, brush));

Kind regards,
Sia
the Telerik team

[Chris Thierry]

Hi Sia,

Thank you for your answer, but unfortunately the control is never "ChartLegendItem" for me... I did the same and is not working, "BaseChartItem2D" is not working either, but I can replace it by "Doughnut" and it works. The only controls that I see in my loop are "Doughnut" and "SeriesItemLabel", I don't see any other.

Do you have an idea of why the control is never "ChartLegendItem"??

Thank you.

[Sia]

Hi Chris Thierry,

Can you please send us a sample project that reproduce your issue? In that way we will be able to verify what causes your problems?

Greetings,
Sia
the Telerik team

[Chris Thierry]

private void LoadOperation_Completed(object sender, EventArgs e)
{
    if ((((LoadOperation)sender).HasError) ||
        (((LoadOperation)sender).Entities.Count() == 0))
    {
         this.RadChartProvider.ItemsSource = null;
         this.RadChartProvider.DefaultView.ChartArea.NoDataString = TMEGlobals.GetLanguageString("noDataAvailable");
         return;
    }

    SeriesMapping m = new SeriesMapping();
    m.SeriesDefinition = new DoughnutSeriesDefinition(); // { LegendDisplayMode = LegendDisplayMode.DataPointLabel };

    m.ItemMappings.Add(new ItemMapping("Percentage", DataPointMember.YValue));
    m.ItemMappings.Add(new ItemMapping("Provider", DataPointMember.LegendLabel));

    m.SeriesDefinition.ItemLabelFormat = "#Y%";

    m.SeriesDefinition.ShowItemToolTips = true;
    m.SeriesDefinition.ItemToolTipFormat = "#Y%";

    m.SeriesDefinition.InteractivitySettings.HoverScope = InteractivityScope.Item;
    m.SeriesDefinition.InteractivitySettings.SelectionScope = InteractivityScope.Item;
    m.SeriesDefinition.InteractivitySettings.SelectionMode = ChartSelectionMode.Single;

    this.RadChartProvider.DefaultView.ChartLegend.BorderBrush = new SolidColorBrush(Colors.Transparent);

    this.RadChartProvider.SeriesMappings.Clear();
    this.RadChartProvider.SeriesMappings.Add(m);
    this.RadChartProvider.ItemsSource = ((LoadOperation<DashboardChart>)sender).Entities.ToList();

    this.RadChartProvider.CreateItemStyleDelegate = BuildCustomItemStyle;

    LoadCompletedRaiseEvent();

}//end of LoadOperation_Completed

public Style BuildCustomItemStyle(Control item, Style style, DataPoint point, DataSeries dataSeries)
{
    if (point == null)
        return style;

    Style newStyle = new Style(style.TargetType);
    newStyle.BasedOn = style;

    if (item is Doughnut)
    {
        int providerID = ((DashboardChart)(dataSeries[(item as Doughnut).CurrentIndex].DataItem)).ID;
        switch ((TMEGlobals.Provider)providerID)
        {
            case 1:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 11, 127, 197)), 1);
                break;
            case 2:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 204, 0, 0)), 1);
                break;
            case 3:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 112, 191, 33)), 1);
                break;
        }
    }

    if (item is SeriesItemLabel)
    {
        int providerID = ((DashboardChart)(((item as SeriesItemLabel)).DataPoint.DataItem)).ID;
        switch ((TMEGlobals.Provider)providerID)
        {
            case 1:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 11, 127, 197)), 2);
                break;
            case 2:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 204, 0, 0)), 2);
                break;
            case 3:
                newStyle = SetProviderStyle(style, new SolidColorBrush(Color.FromArgb(250, 112, 191, 33)), 2);
                break;
        }
    }

    //if (item is ChartLegendItem) //doesn't work....
    //{
    //    newStyle.Setters.Add(new Setter(Path.FillProperty, SetProviderStyle(style, TMEGlobals.ColorBellMobility, 2)));
    //}

    return newStyle;
}//end of BuildCustomItemStyle

private Style SetProviderStyle(Style style, SolidColorBrush color, int propertyType)
{
    Style newStyle = new Style(style.TargetType);
    newStyle.BasedOn = style;

    if (propertyType == 1)
    {
        newStyle.Setters.Add(new Setter(Shape.FillProperty, color));
        newStyle.Setters.Add(new Setter(Shape.StrokeProperty, color));
    }
    else if (propertyType == 2)
    {
        newStyle.Setters.Add(new Setter(SeriesItemLabel.FillProperty, color));
        newStyle.Setters.Add(new Setter(SeriesItemLabel.StrokeProperty, color));
    }
    return newStyle;
}//end of SetProviderStyle

<UserControl x:Class="Dashboard.ProviderUC"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:charting="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Border
            Style="{StaticResource BorderStyleCornerRadiusOnTop}">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFD1D1D1" Offset="0" />
                    <GradientStop Color="#00F5FAFC" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock
                x:Name="TextBlockTitle"
                Text="Providers"
                TextWrapping="Wrap"
                Margin="10,10,0,5"
                Style="{StaticResource ModuleTitleStyle}" />
        </Border>

        <Image
            x:Name="ImageExportChart"
            Source="/Images/Icons/chart_pie.png"
            Stretch="None"
            VerticalAlignment="Center"
            HorizontalAlignment="Right"
            MouseLeftButtonDown="ImageExportChart_MouseLeftButtonDown"
            Margin="0,0,6,0"
            Cursor="Hand" >
            <ToolTipService.ToolTip>
                <ToolTip x:Name="ToolTipExportChart" VerticalOffset="10"></ToolTip>
            </ToolTipService.ToolTip>
        </Image>

        <charting:RadChart
            x:Name="RadChartProvider"
            Grid.Row="1"
            Grid.Column="0"
            Margin="5,0,5,5" />

    </Grid>

</UserControl>

[Sia]

Hi Chris Thierry,

Please check the attached solution which I created to demonstrate the behavior which you need.
If this does not help, please modify it in accordance with your code so that the experienced issue can be reproduced.

Best wishes,
Sia
the Telerik team

[Chris Thierry]

HI Sia,
Thank you for the project, I found that first time, I don't see ChartLegendItem when I'm looping, after loading the page and reload my chart, I see this item in the loop. Don't know why...  do you have any idea?
Thank you.

[Giuseppe]

Hello Chris,

We are unable to reproduce the described behavior in the sample application Sia sent you earlier -- could you confirm you are experiencing the issue in the same application or you have modified it?


Best wishes,
Giuseppe
the Telerik team

[Chris Thierry]

Hello Giuseppe,

Your project is ok, I'm talking about my project... I did the same but it doens't work.
I give up.
Thank you.