This is a migrated thread and some comments may be shown as answers.

Colour palette for 3D pie chart (WPF)

7 Answers 277 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 30 Jan 2009, 03:50 PM
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.

7 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 02 Feb 2009, 01:11 PM
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.
0
Gary
Top achievements
Rank 1
answered on 02 Feb 2009, 01:32 PM
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.
0
Giuseppe
Telerik team
answered on 04 Feb 2009, 09:09 AM
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.
0
santos
Top achievements
Rank 1
answered on 09 Mar 2010, 08:43 PM
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???
0
santos
Top achievements
Rank 1
answered on 09 Mar 2010, 09:11 PM

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       

0
Eric
Top achievements
Rank 1
answered on 08 Sep 2010, 12:56 PM
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.
0
Giuseppe
Telerik team
answered on 13 Sep 2010, 11:57 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Chart
Asked by
Gary
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Gary
Top achievements
Rank 1
santos
Top achievements
Rank 1
Eric
Top achievements
Rank 1
Share this question
or