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

Doughnut3D slices colors

3 Answers 44 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Aldo
Top achievements
Rank 2
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

Sort by
0
Evgenia
Telerik team
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="#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 >>
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...
0
Accepted
Tina Stancheva
Telerik team
answered on 05 Feb 2014, 10:38 AM
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
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 >>
Tags
Chart
Asked by
Aldo
Top achievements
Rank 2
Answers by
Evgenia
Telerik team
Aldo
Top achievements
Rank 2
Tina Stancheva
Telerik team
Share this question
or