Show multiple series in Pie Chart

[Olena Dontsova]

Hi, Syncfusion. 

I want to show few series in Pie Chart, but i did not find examples for this.

Here is my code, but it shows only first series.

<div class="chart"> 

        <SfAccumulationChart>

            <AccumulationChartSeriesCollection>

                <AccumulationChartSeries DataSource="@ChartData" XName="X" YName="Y"

                                         PointColorMapping="Fill" InnerRadius="90" StartAngle="0" EndAngle="270" Radius="100">             

                </AccumulationChartSeries>

                <AccumulationChartSeries DataSource="@ChartData" XName="X" YName="Y"

                                         PointColorMapping="Fill" InnerRadius="80" StartAngle="0" EndAngle="270" Radius="89">

                </AccumulationChartSeries>

            </AccumulationChartSeriesCollection>

        </SfAccumulationChart>

      

</div>

@code {

    public IList<SeriesData> ChartData { get; set; } = new List<SeriesData>() {

                new SeriesData(){X = "A", Y=90, LegendTitle= "1-A", Fill= "Blue"},

                new SeriesData(){X = "B", Y=10, LegendTitle= "2-B", Fill= "LightGray"},

              

            };

    public class SeriesData

    {

        public string X { get; set; }

        public double? Y { get; set; }

        public string LegendTitle { get; set; }

        public string Fill { get; set; }

    }

}

[Baby Palanidurai]

Hi Olena, 

 

Greetings for Syncfusion. 

 

We have analyzed your query. As of now, we don’t multiple pie series support. You can achieve your requirement by using annotation features. In annotation, you can add another pie inside the annotations. 

 

Code snippet: 

<SfAccumulationChart> 

    <AccumulationChartAnnotations> 

        <AccumulationChartAnnotation X="460"  Y="230"> 

            <ContentTemplate> 

                <SfAccumulationChart ID="pie" Height="180" Width="180" Background="transparent"> 

                     

                </SfAccumulationChart> 

            </ContentTemplate> 

        </AccumulationChartAnnotation> 

    </AccumulationChartAnnotations> 

    <AccumulationChartSeriesCollection> 

        <AccumulationChartSeries DataSource="@ChartData" XName="X" YName="Y" 

                                 PointColorMapping="Fill" InnerRadius="90" StartAngle="0" EndAngle="270" Radius="100"> 

        </AccumulationChartSeries> 

    </AccumulationChartSeriesCollection> 

</SfAccumulationChart> 

 

Screenshot: 

 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pie-2100939030 

 

 

Kindly revert us, if you have any concerns. 

 

Regards, 

Baby. 

[Olena Dontsova]

Hi. It works. Thansk.

[Baby Palanidurai]

Hi Olena, 

Most welcome. Please revert us, if you have any other concerns. 

Regards, 

Baby.