Remove outer border of PieChart

[Dion]

Hi,

I am building a multi layered pie chart (by stacking charts).

I would like to remove the border - but I do not want to remove the border between individual pieces.

 

 

Code:

 

<Grid Grid.Column="1" x:Name="StackingChartsContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>

<Grid x:Name="FirstChartGrid" Grid.Column="0">
<telerik:RadPieChart Palette="Windows8" x:Name="FirstChart">
<telerik:RadPieChart.Series>
<telerik:PieSeries>
<telerik:PieSeries.DataPoints>
<telerik:PieDataPoint Label="Operating Time" Value="30"/>
<telerik:PieDataPoint Label="Total Downtime" Value="70"/>
</telerik:PieSeries.DataPoints>
</telerik:PieSeries>
</telerik:RadPieChart.Series>
</telerik:RadPieChart>
</Grid>

<Grid Grid.Column="0"
Width="{Binding Path=ActualWidth, ElementName=StackingChartsContainer, Converter={local:PercentageConverter}, ConverterParameter='0.5'}"  
Height="{Binding Path=ActualHeight, ElementName=StackingChartsContainer, Converter={local:PercentageConverter}, ConverterParameter='0.5'}">

<telerik:RadPieChart Palette="Windows8" x:Name="SecondChart">
<telerik:RadPieChart.Series>
<telerik:PieSeries>
<telerik:PieSeries.DataPoints>
<telerik:PieDataPoint Label="Operating time" Value="30"/>
<telerik:PieDataPoint Label="Internal Downtime" Value="35"/>
<telerik:PieDataPoint Label="External Downtime" Value="35"/>
</telerik:PieSeries.DataPoints>
<telerik:PieSeries.LegendSettings>
<telerik:DataPointLegendSettings/>
</telerik:PieSeries.LegendSettings>
</telerik:PieSeries>

</telerik:RadPieChart.Series>
</telerik:RadPieChart>
</Grid>

<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
</Grid>

<StackPanel Grid.Column="1"
            Margin="0 14 0 0"
            HorizontalAlignment="Center"
            VerticalAlignment="Bottom">
<TextBlock Text="LEGEND:"
           Margin="0 0 0 5"
           HorizontalAlignment="Left"/>

<!--<telerik:RadLegend Grid.Column="1"
                   Items="{Binding LegendItems, ElementName=RadCartesianChart}"
                   Foreground="#FF767676"
                   FontFamily="Segoe UI"/>-->
<telerik:RadLegend x:Name="PieLegend"
                   Items="{Binding LegendItems, ElementName=FirstChart}"/>
<telerik:RadLegend x:Name="PieLegend2"
                   Items="{Binding LegendItems, ElementName=SecondChart}"/>
</StackPanel>


</Grid>

[Drago]

Hello Dion,

There is no direct way to do what you have described as strokes are either set or removed for all lines within a pie slice. What you can do to achieve the result you desire is to have a DoughnutSeries mask on the outside line of the smaller PieSeries by controlling the series size via the RadiusFactor and InnerRadiusFactor properties. Then set pie slice style to get the look in terms of colors. Keep in mind, that the Palette property will have priority over the style, so you will need to remove it.

I have created a sample project to showcase how you can achieve that.

Please give it a try on your end and let me know if it works for you.

Regards,
Drago
Progress Telerik

[Dion]

Hi Drago,

 

Thanks for taking the time to answer me in depth.

This seems to suit my needs and i marked the post as answered!