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

Removing 3D plastic effect from doughnut chart.

4 Answers 49 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Martin
Top achievements
Rank 1
Martin asked on 02 May 2011, 04:12 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Sia
Telerik team
answered on 05 May 2011, 12:05 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Martin
Top achievements
Rank 1
answered on 05 May 2011, 12:58 PM
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
0
Sia
Telerik team
answered on 05 May 2011, 01:05 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Martin
Top achievements
Rank 1
answered on 05 May 2011, 01:30 PM
Thank you, Sia.
~Martin
Tags
Chart
Asked by
Martin
Top achievements
Rank 1
Answers by
Sia
Telerik team
Martin
Top achievements
Rank 1
Share this question
or