The following steps show how to create a Shared Pie chart in the C1Composite chart at design time and through source code. This type of chart allows a user to display related data using more than one pie chart on the same canvas. These pie charts share the same legend. Multiple pie charts in this example illustrate the comparative usage of each major browser in the year 2010 and 2014. The data in the pie chart on the left measures browser usage in the year 2010. The pie chart on the right displays data describing browser usage in the year 2014.

In the Designer

To add a shared pie chart data to the C1CompositeChart, follow these steps:

1. Click C1CompositeChart's smart tag to open the C1CompositeChart Tasks menu.
2. Click SeriesList to open the CompositeChartSeries Collection Editor.
3. In the CompositeChartSeries Collection Editor, click the Add button once to add one CompositeChartSeries to the CompositeChart. Set the properties as shown below:

   Type	Label	Center
   SharedPie	A New SharedPie	150, 150

4. Click the ellipsis button next to the SharedPieSeriesList to open the SharedPieChartSeries Collection Editor.
5. Click the Add button two times to add two new SharedPieChartSeries to the CompositeChart.
6. Set the label of the first series as 2010 and center as 150,150.
7. Set the label of the second series as 2014 and center as 300, 150.
8. Select the first SharedPieChart series and click the ellipsis button next to PieSeriesList to open the PieChartSeries Collection Editor.
9. In the PieChartSeries Collection Editor, click the Add button three times to add three PieChartSeries to the first SharedPieChartSeries. Set their properties as shown below:
   

   Member	Label	Data
   0	Chrome	6.04
   1	Firefox	31.64
   2	IE	55.25

10. Similarly, add three PieChartSeries to the second SharedPieChartSeries and set their properties as shown below:
    

    Member	Label	Data
    0	Chrome	43.67
    1	Firefox	23.18
    2	IE	20.25

11. Click OK to save and close the PieChartSeries Collection Editor and then click OK to close the SharedPieCollection Editor.
12. Finally, click OK to save and close the CompositeChartSeries Collection Editor.

In Source View

Use the following code to add a shared pie series to the composite chart.

<wijmo:C1CompositeChart ID="C1CompositeChart1" runat="server">    
      <SeriesList>
  <wijmo:CompositeChartSeries Label="A new SharedPie" LegendEntry="True" Type="SharedPie">
        <CandlestickSeries LegendEntry="True">
        </CandlestickSeries>
      <SharedPieChartSeries>
         <wijmo:CompositeSharedPieSeries LegendEntry="True" Center="150,150" Label="2010">
             <PieSeriesList>
                  <wijmo:PieChartSeries Data="46.78" Label="Chrome" LegendEntry="True">
                  </wijmo:PieChartSeries>
                  <wijmo:PieChartSeries Data="23.18" Label="Firefox" LegendEntry="True">
                  </wijmo:PieChartSeries>
                  <wijmo:PieChartSeries Data="20.25" Label="IE" LegendEntry="True">
                  </wijmo:PieChartSeries>
             </PieSeriesList>
         </wijmo:CompositeSharedPieSeries>
         <wijmo:CompositeSharedPieSeries LegendEntry="True" Center="300,150" Label="2014">
              <PieSeriesList>
                  <wijmo:PieChartSeries Data="23.6" Label="Chrome" LegendEntry="True">
                  </wijmo:PieChartSeries>
                  <wijmo:PieChartSeries Data="18.9" Label="Firefox" LegendEntry="True">
                  </wijmo:PieChartSeries>
                  <wijmo:PieChartSeries Data="22.85" Label="IE" LegendEntry="True">
                  </wijmo:PieChartSeries>
              </PieSeriesList>
         </wijmo:CompositeSharedPieSeries>
      </SharedPieChartSeries>
    </wijmo:CompositeChartSeries>
 </SeriesList>
</wijmo:C1CompositeChart>

This Topic Illustrates the Following:

The following image shows a Shared PieChart added to a composite chart: