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

Remove outer border of PieChart

2 Answers 63 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Dion
Top achievements
Rank 1
Dion asked on 30 Sep 2019, 10:31 AM

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>

2 Answers, 1 is accepted

Sort by
0
Accepted
Drago
Telerik team
answered on 02 Oct 2019, 02:42 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dion
Top achievements
Rank 1
answered on 02 Oct 2019, 03:14 PM

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!

Tags
ChartView
Asked by
Dion
Top achievements
Rank 1
Answers by
Drago
Telerik team
Dion
Top achievements
Rank 1
Share this question
or