Doughnut3D slices colors

4 posts, 1 answers
  1. Aldo
    Aldo avatar
    39 posts
    Member since:
    Feb 2011

    Posted 31 Jan 2014 Link to this post

    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);
  2. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 03 Feb 2014 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Aldo
    Aldo avatar
    39 posts
    Member since:
    Feb 2011

    Posted 03 Feb 2014 in reply to Evgenia Link to this post

    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...
  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Feb 2014 Link to this post

    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 >>
Back to Top