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

Doughnut3D slices colors

3 Answers 93 Views

Chart

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

Aldo asked on 31 Jan 2014, 05:41 PM

Hi, how can I set custom color for Doughnut3D slices ?

I've this code, and I want that "Slice 1" in Blue, "Slice 2" in Green, "Slice 3" in Red and "Slice 4" in Yellow. I need to use my personal colors.

// CODE
                    rcTimes.DefaultView.ChartArea.DataSeries.Clear();
                    rcTimes.DefaultView.ChartLegend.Header = string.Empty;
                    DataSeries serPT = new DataSeries();
                    Doughnut3DSeriesDefinition sdWorking = new Doughnut3DSeriesDefinition();
                    sdWorking.ShowItemLabels = false;
                    serPT.Definition = sdWorking;
                    DataPoint dp = new DataPoint(report.WorkingTime.TotalSeconds);
                    dp.LegendLabel = "Slice 1";
                    serPT.Add(dp);
                    dp = new DataPoint(report.WorkingExtraTime.TotalSeconds);
                    dp.LegendLabel = "Slice 2";
                    serPT.Add(dp);
                    dp = new DataPoint(report.PauseTime.TotalSeconds);
                    dp.LegendLabel = "Slice 3";
                    serPT.Add(dp);
                    dp = new DataPoint(report.AlarmTime.TotalSeconds);
                    dp.LegendLabel = "Slice 4";
                    serPT.Add(dp);
                    rcTimes.DefaultView.ChartArea.DataSeries.Add(serPT);

3 Answers, 1 is accepted

answered on 03 Feb 2014, 12:22 PM

Hi Aldo,

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 (the materials collection is the same for all 3D series types):

<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="Lime" />

<SpecularMaterial Brush="#FFFFFFFF" />

<SpecularMaterial SpecularPower="0" />

</MaterialGroup.Children>

</MaterialGroup>

<MaterialGroup>

<MaterialGroup.Children>

<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" />

</Grid>

The default materials collection per theme can be found under your local installation path (for example: RadControls_for_WPF_2013_3_1204_Trial\Themes\WPF40\OfficeBlack\Themes\Office\Black\Charting.3D.xaml).

I hope this information helps.

Regards,
Evgenia
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 03 Feb 2014, 02:13 PM

It doesn't work.

But why is it so mazy ?
Add a Fill property to DataPoint and use it, if null use the resource values.

My chart actually doesn't use a theme, but I try to use Vista as in your sample, without results.

<telerik:RadChart x:Name="rcTimes" telerik:StyleManager.Theme="VistaTheme" HorizontalAlignment="Left" Margin="451.023,341.056,0,0" VerticalAlignment="Top" Height="227.225"/>

then I try to override in grid resources

<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="Lime" />
                                       <SpecularMaterial Brush="Lime" />
                                       <SpecularMaterial SpecularPower="0" />
                                   </MaterialGroup.Children>
                               </MaterialGroup>

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

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

                               <MaterialGroup>
                                   <MaterialGroup.Children>
                                       <DiffuseMaterial Brush="ForestGreen" />
                                       <SpecularMaterial Brush="ForestGreen" />
                                       <SpecularMaterial SpecularPower="0" />
                                   </MaterialGroup.Children>
                               </MaterialGroup>
                           </telerik:MaterialsCollection>
                       </Grid.Resources>

and finally I try to change them directly into F:\Program Files (x86)\Telerik\UI for WPF Q3 2013\Themes\WPF40\Vista\Themes\Vista\Charting.3D.xaml , but nothing, it uses always the same colors...

Accepted

answered on 05 Feb 2014, 10:38 AM

WpfApplication1.zip

Hello Aldo,

After taking a closer look at your requirements, I believe that you can try an easier approach for implementing your requirements. You can create custom PalletteBrushes as described in the Styling the Chart Series tutorial.

I attached a sample solution to demonstrate this approach so please have a look at it and let us know if it helps.

Regards,
Tina Stancheva
Telerik