Colour palette for 3D pie chart (WPF)

[Gary]

Hi,

I've been evaluating the WPF charting component and am really struggling to find out how to change the colour palette for a pie chart. Can anyone help?

Also noticed that when you resize the width of a window containing a 3D pie chart, the chart will scale, but if you adjust the height, it doesn't. Am I doing something wrong? Code below:

<Window x:Class="Telerik1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    Title="Window1" Height="600" Width="800" Loaded="ExampleControl_Loaded" Unloaded="ExampleControl_Unloaded">
    <Window.Resources>
        <Style TargetType="{x:Type telerik:RadChart}">
            <Setter Property="telerik:Theming.Theme">
                <Setter.Value>
                    <telerik:VistaTheme/>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    <Grid>
        <telerik:RadChart x:Name="RadChart1" />
    </Grid>
</Window>

Thanks,
Gary.

[Giuseppe]

Hello Gary,

You can review this knowledge base article here that explains how to customize the default color palette for the chart control in WPF. Basically the chart control uses the concept of style palettes in order to style the various chart series. There are distinct style palettes for the various series types (Line, Bar, Pie, etc.) and each palette can contain as many style elements as you want -- the first style is applied to the first chart series of the given type, the second - to the second series, etc.

For 3D series instead of style palettes, you need to apply Materials (combined in a MaterialsCollection). You can override the default materials collection for the Vista Theme like this (the materials collection is the same for all 3D series types):

<Window x:Class="WpfApplication6.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="Window2" Height="300" Width="600">
    <Grid>
        <Grid.Resources>

            <telerik:MaterialsCollection x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:VistaTheme},
                ElementType={x:Type telerik:ChartArea},
                ResourceId={x:Static telerik:ResourceHelper.ResourceKey3DStyle}}" >

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <!--<DiffuseMaterial Brush="#FF5DE7FE" />-->
                        <DiffuseMaterial Brush="Lime" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <!--<DiffuseMaterial Brush="#FFB9FB28" />-->
                        <DiffuseMaterial Brush="Bisque" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FFFC298F" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FFD4D4D4" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FFFF4500" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FFFFAF00" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />

                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FF000000" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FF00FF00" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

                <MaterialGroup>
                    <MaterialGroup.Children>
                        <DiffuseMaterial Brush="#FF002FFF" />
                        <SpecularMaterial Brush="#FFFFFFFF" />
                        <SpecularMaterial SpecularPower="0" />
                    </MaterialGroup.Children>
                </MaterialGroup>

            </telerik:MaterialsCollection>

        </Grid.Resources>

        <telerik:RadChart x:Name="RadChart1" telerik:Theming.Theme="Vista" />

    </Grid>
</Window>

We have  attached a runnable sample application that demonstrates changing the styles palette for 2D pie chart (Window1.xaml) and changing the materials collection for 3D chart (Window2.xaml).

As for the resizing problem -- indeed you are right and we must confirm this is a problem with the current implementation of the pie chart control. We will log this issue in our bugtracking system and will forward it to our developers for further review. We have updated your Telerik points for the report.


Kind regards,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Gary]

Thanks very much for your response, Manuel. No wonder I struggled to do it. It seems to be an extraordinarily complex API for what I would consider to be a simple operation. I've also been looking at Infragistics and they make such customizations very simple. Interestingly enough, they also suffer from exactly the same scaling bug.

Gary.

[Giuseppe]

Hi Gary,

Thank you for your feedback. We will forward it to our developers so they consider simplifying the skinning behavior for the future version of the chart control.


Kind regards,
Manuel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[santos]

hi:

The example showed in the file above (WpfApplication6.zip) is right. But this example used a dll of version 2008. With the versión 2009 (trial), this example only show the colors in the chart. but the labels colors are other.

And now???

[santos]

hi:
   to solve the last point. Under code was add the labels with color.

            pie.DataSeries.Add(series);
            ....

            ChartLegendItem e = new ChartLegendItem();

            e.Label = "description a";

            e.Background = Brushes.Green;

            e.Foreground = Brushes.Black;

            chartLegend.Items.Add(e);   //seccion of chartlegend in XAML

 

            e = new ChartLegendItem();

            e.Label = "description b";

            e.Background = Brushes.Orange;

            e.Foreground = Brushes.Black;

            chartLegend.Items.Add(e);

         ..           

            chartLegend.UseAutoGeneratedItems = false;     // disable the auto generation labels       

[Eric]

Using the above zip file project, if I comment out the entire <Grid.Resources> section of the Windows2.xaml file I get the same colours as if I leave it uncommented.  It seems to have no effect.  I am using Q2 2010 SP1.

[Giuseppe]

Hello Eric,

In recent versions of the control there is much easier way to define color palettes through the RadChart.PaletteBrushes property:

XAML

<telerik:RadChart x:Name="RadChart1">
    <telerik:RadChart.PaletteBrushes>
        <SolidColorBrush Color="Red" />
        <SolidColorBrush Color="Green" />
        <SolidColorBrush Color="Blue" />
        <SolidColorBrush Color="Gainsboro" />
        <SolidColorBrush Color="GhostWhite" />
        <SolidColorBrush Color="BlueViolet" />
        <SolidColorBrush Color="Firebrick" />
        <SolidColorBrush Color="WhiteSmoke" />
    </telerik:RadChart.PaletteBrushes>
</telerik:RadChart>

C#

RadChart1.DefaultSeriesDefinition = new Pie3DSeriesDefinition();
RadChart1.ItemsSource = new int[] { 11, 20, 13, 14, 50, 10, 15 };

Hope this helps.


Kind regards,
Freddie
the Telerik team