Filling in the hole of a Doughnut Chart

2 posts, 0 answers
  1. JOSH
    JOSH avatar
    1 posts
    Member since:
    Nov 2010

    Posted 10 Jan 2011 Link to this post

    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.
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 13 Jan 2011 Link to this post

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Back to Top