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);
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
0
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):
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
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="#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"
/>
</
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 >>
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 >>
0

Aldo
Top achievements
Rank 2
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...
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...
0
Accepted
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
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
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 >>
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 >>