Filling in the hole of a Doughnut Chart

[JOSH]

I am using a Doughnut series for a Pie Chart, but I need to present data in the hole in the chart.  Any suggestions on how to best accomplish this task?  My main concern is positioning this additional element so it is always centered in the hole in the Doughnut chart.

This is essentially what I am looking to do, but the element in the Doughnut hole does not have to be another chart - it could simply be a drawn element.

[Yavor]

Hi JOSH,

At present, the required functionality is not available out of the box.
You can overlay two charts, making the background transparent. In this way, the pie can be rendered in the spare space of the doughnuyt. This may look something like this:

<Grid>
       <Grid.RowDefinitions>
           <RowDefinition>
           </RowDefinition>
       </Grid.RowDefinitions>
       <telerikChart:RadChart x:Name="RadChart1" VerticalAlignment="Top" Grid.Row="0">
           <telerikChart:RadChart.DefaultView>
               <telerikCharting:ChartDefaultView>
                   <telerikCharting:ChartDefaultView.ChartArea>
                       <telerikCharting:ChartArea LegendName="chartLegend">
                           <telerikCharting:ChartArea.DataSeries>
                               <telerikCharting:DataSeries LegendLabel="Turnover">
                                   <telerikCharting:DataSeries.Definition>
                                       <telerik:PieSeriesDefinition>
                                       </telerik:PieSeriesDefinition>
                                   </telerikCharting:DataSeries.Definition>
                                   <telerikCharting:DataPoint YValue="138" XCategory="Feb"/>
                                   <telerikCharting:DataPoint YValue="143" XCategory="Mar"/>
                                   <telerikCharting:DataPoint YValue="120" XCategory="Apr"/>
                                   <telerikCharting:DataPoint YValue="135" XCategory="May"/>
                                   <telerikCharting:DataPoint YValue="125" XCategory="Jun"/>
                                   <telerikCharting:DataPoint YValue="179" XCategory="Jul"/>
                                   <telerikCharting:DataPoint YValue="170" XCategory="Aug"/>
                                   <telerikCharting:DataPoint YValue="198" XCategory="Sep"/>
                                   <telerikCharting:DataPoint YValue="187" XCategory="Oct"/>
                                   <telerikCharting:DataPoint YValue="193" XCategory="Nov"/>
                                   <telerikCharting:DataPoint YValue="176" XCategory="Dec"/>
                               </telerikCharting:DataSeries>
                           </telerikCharting:ChartArea.DataSeries>
                       </telerikCharting:ChartArea>
                   </telerikCharting:ChartDefaultView.ChartArea>
               </telerikCharting:ChartDefaultView>
           </telerikChart:RadChart.DefaultView>
       </telerikChart:RadChart>
       <telerikChart:RadChart x:Name="RadChart2" VerticalAlignment="Top" Grid.Row="0">
           <telerikChart:RadChart.DefaultView>
               <telerikCharting:ChartDefaultView>
                   <telerikCharting:ChartDefaultView.ChartArea>
                       <telerikCharting:ChartArea LegendName="chartLegend">
                           <telerikCharting:ChartArea.DataSeries>
                               <telerikCharting:DataSeries LegendLabel="Turnover">
                                   <telerikCharting:DataSeries.Definition>
                                       <telerik:DoughnutSeriesDefinition>
                                       </telerik:DoughnutSeriesDefinition>
                                   </telerikCharting:DataSeries.Definition>

                                   <telerikCharting:DataPoint YValue="138" XCategory="Feb"/>
                                   <telerikCharting:DataPoint YValue="143" XCategory="Mar"/>
                                   <telerikCharting:DataPoint YValue="120" XCategory="Apr"/>
                                   <telerikCharting:DataPoint YValue="135" XCategory="May"/>
                                   <telerikCharting:DataPoint YValue="125" XCategory="Jun"/>
                                   <telerikCharting:DataPoint YValue="179" XCategory="Jul"/>
                                   <telerikCharting:DataPoint YValue="170" XCategory="Aug"/>
                                   <telerikCharting:DataPoint YValue="198" XCategory="Sep"/>
                                   <telerikCharting:DataPoint YValue="187" XCategory="Oct"/>
                                   <telerikCharting:DataPoint YValue="193" XCategory="Nov"/>
                                   <telerikCharting:DataPoint YValue="176" XCategory="Dec"/>
                               </telerikCharting:DataSeries>
                           </telerikCharting:ChartArea.DataSeries>
                       </telerikCharting:ChartArea>
                   </telerikCharting:ChartDefaultView.ChartArea>
               </telerikCharting:ChartDefaultView>
           </telerikChart:RadChart.DefaultView>
       </telerikChart:RadChart>

   </Grid>

public MainPage()
       {
           InitializeComponent();
           SolidColorBrush scb1 = new SolidColorBrush(Colors.Transparent);
           RadChart2.Background = scb1;
           RadChart2.DefaultView.ChartArea.Background = scb1;
           RadChart1.DefaultView.ChartArea.Background = scb1;


       }

I hope this gets you started properly.

Greetings,
Yavor
the Telerik team