Removing 3D plastic effect from doughnut chart.

[Martin]

Hello,

I apologize for this question up front, but I can't find any solution.

I'm building doughnut chart and the last issue I still have with appearance is that I can't get rid of that plastic, pseudo-3D effect over the chart as shown on the screenshot. I don't even know how is it called (for searching).

Thank you for any advise.
~Martin

[Sia]

Hello Martin,

You need to set custom style to your doughnut as the one below:

<Style  x:Key="CustomDoughnut" TargetType="telerik:Doughnut">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:Doughnut">
                <Canvas x:Name="PART_MainContainer" >
                    <Ellipse Clip="{TemplateBinding FigurePath}"
                            Width="{TemplateBinding ItemActualWidth}"
                            Height="{TemplateBinding ItemActualHeight}"
                            StrokeThickness="0"
                            Style="{TemplateBinding ItemStyle}"/>
                    <Path x:Name="PART_DefiningGeometry"
                        Data="{TemplateBinding FigurePath2}"
                        Fill="Transparent"
                        Style="{TemplateBinding ItemStyle}" />
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                            <TranslateTransform x:Name="PART_ExplodeTransform" />
                        </TransformGroup>
                    </Canvas.RenderTransform>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="HoverStates">
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hovered">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation To="0.6" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="X" To="0" />
                                    <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="Y" To="0" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="X" />
                                    <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetName="PART_ExplodeTransform" Storyboard.TargetProperty="Y" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Regards,
Sia
the Telerik team

[Martin]

Hi Sia,

thank you, this solution achieved the desired effect.

So this is the default template, just with that one bit removed? Is there somewhere a list of all default templates, in case I will need to do this with a different type of chart?

Regards,
~Martin

[Sia]

Hi Martin,

Yes, this is the default template of the Doughnut series having one rectangle removed (which represents the mask overlay). You can extract the latest templates through Blend.

Best wishes,
Sia
the Telerik team

[Martin]

Thank you, Sia.
~Martin