Search results

Pie & Doughnut in ASP.NET Core Accumulation Chart control

15 Oct 2021 / 2 minutes to read

Pie Chart

To render a pie series, use the series type as Pie.

tagHelper
pie.cs
Copied to clipboard
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser">
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Radius Customization

By default, radius of the pie series will be 80% of the size (minimum of chart width and height). You can customize this using radius property of the series.

tagHelper
radius.cs
Copied to clipboard
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser"
                radius="100%">
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Pie Center

The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using center property of the series.

tagHelper
piecenter.cs
Copied to clipboard
@{
        var piecenter = new
        {
            x = "60%",
            y = "60%"
        };

    

<ejs-accumulationchart id="container" title="Mobile Browser Statistics" enableAnimation="false" center="piecenter">
            <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser" explodeIndex="0" explode="true" explodeOffset="10%">
                    <e-accumulationseries-datalabel name="text" visible="true">
                        <e-font fontWeight="600" color="white"></e-font>
                    </e-accumulationseries-datalabel>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieData { xValue =  "Chrome", yValue = 37, text = "37%" },
                new PieData { xValue =  "UC Browser", yValue = 17, text = "17%" },
                new PieData { xValue =  "iPhone", yValue = 19, text = "19%" },
                new PieData { xValue =  "Others", yValue = 4, text = "4%" },
                new PieData { xValue =  "Opera", yValue = 11, text = "11%" },
                new PieData { xValue =  "Android", yValue = 12, text = "12%" },   

            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
            public string text;
            
        }

Various Radius Pie Chart

You can use radius mapping to render the slice with different radius pie and also use border , fill properties to customize the point. dataLabel is used to represent individual data and its value.

tagHelper
various-radius.cs
Copied to clipboard
<ejs-accumulationchart id="container" enableAnimation="true" enableSmartLabels="true">
            <e-accumulationchart-tooltipsettings enable="true"></e-accumulationchart-tooltipsettings>
            <e-accumulationchart-legendsettings visible="true">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue"  innerRadius="20%" radius="r">
                    <e-accumulationseries-datalabel name="x" visible="true" position="Outside">
                    </e-accumulationseries-datalabel>
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieRadiusChartData { xValue = "Argentina", yValue = 505370, r = "100"},
                new PieRadiusChartData { xValue = "Belgium",    yValue = 551500, r = "118.7"},
                new PieRadiusChartData { xValue = "Cuba",  yValue = 312685 , r = "124.6"},
                new PieRadiusChartData { xValue = "Dominican Republic", yValue = 350000 , r = "137.5"},
                new PieRadiusChartData { xValue = "Egypt", yValue = 301000 , r = "150.8"},
                new PieRadiusChartData { xValue = "Kazakhstan", yValue = 300000, r = "155.5"},
                new PieRadiusChartData { xValue = "Somalia",  yValue = 357022, r = "160.6"}  

            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
            public string r;
            
        }

Doughnut Chart

To achieve a doughnut in pie series, customize the innerRadius property of the series. By setting value greater than 0%, a doughnut will appear. The innerRadius property takes value from 0% to 100% of the pie radius.

tagHelper
doughnut.cs
Copied to clipboard
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser" innerRadius="40%">
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Start and End angles

You can customize the start and end angle of the pie series using the startAngle and endAngle properties. The default value of startAngle is 0 degree, and endAngle is 360 degrees. By customizing this, you can achieve a semi pie series.

tagHelper
start-angle.cs
Copied to clipboard
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
            <e-accumulationchart-legendsettings visible="false">
            </e-accumulationchart-legendsettings>
            <e-accumulation-series-collection>
                <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser"
                startAngle="270" endAngle="90">
                </e-accumulation-series>
            </e-accumulation-series-collection>
        </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Color & Text Mapping

The fill color and the text in the data source can be mapped to the chart using pointColorMapping in series and name in datalabel respectively.

tagHelper
map.cs
Copied to clipboard
<ejs-accumulationchart id="container" title="Mobile Browser Statistics">
                    <e-accumulationchart-legendsettings visible="false">
                    </e-accumulationchart-legendsettings>
                    <e-accumulation-series-collection>
                        <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser"
                                               pointColorMapping="fill">
                            <e-accumulationseries-datalabel name="text" visible="true">
                            </e-accumulationseries-datalabel>
                        </e-accumulation-series>
                    </e-accumulation-series-collection>
                </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"},
                new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"},
                new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"},
                new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"},
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Customization

Individual points can be customized using the pointRender event.

tagHelper
custom.cs
Copied to clipboard
<ejs-accumulationchart id="container" title="Mobile Browser Statistics" pointRender="pointRender">
                    <e-accumulationchart-legendsettings visible="false">
                    </e-accumulationchart-legendsettings>
                    <e-accumulation-series-collection>
                        <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser">
                        </e-accumulation-series>
                    </e-accumulation-series-collection>
                </ejs-accumulationchart>

       <script>
            var pointRender = function (args) {
                if ((args.point.x).indexOf("iPhone") > -1) {
                    args.fill = '#f4bc42';
                }
                else {
                    args.fill = '#597cf9';
                }
            };
        </script>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Hide pie or doughnut border

By default, the border will appear in the pie/doughnut chart while mouse hover on the chart. You can disable the the border by setting EnableBorderOnMouseMove property is false.

tagHelper
border.cs
Copied to clipboard
<ejs-accumulationchart id="container" enableBorderOnMouseMove="false">
                    <e-accumulationchart-legendsettings visible="false">
                    </e-accumulationchart-legendsettings>
                    <e-accumulation-series-collection>
                        <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser">
                        </e-accumulation-series>
                    </e-accumulation-series-collection>
                </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

Color Palette

You can customize the color the of the point using the palettes property.

tagHelper
palette.cs
Copied to clipboard
<ejs-accumulationchart id="container" enableBorderOnMouseMove="false">
                    <e-accumulationchart-legendsettings visible="false">
                    </e-accumulationchart-legendsettings>
                    <e-accumulation-series-collection>
                        <e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue" name="Browser" palettes="['teal', 'skyblue', 'green', 'red']">
                        </e-accumulation-series>
                    </e-accumulation-series-collection>
                </ejs-accumulationchart>
Copied to clipboard
public ActionResult Index()
        {
            List<PieChartData> chartData = new List<PieChartData>
            {

                new PieChartData { xValue = "Chrome", yValue = 37 },
                new PieChartData { xValue = "UC Browser", yValue = 17 },
                new PieChartData { xValue = "iPhone", yValue = 19 },
                new PieChartData { xValue = "Others", yValue = 4  },
                new PieChartData { xValue = "Opera", yValue = 11 },
                new PieChartData { xValue = "Android", yValue = 12 },
            };
            ViewBag.dataSource = chartData;
            return View();
        }
        public class PieChartData
        {
            public string xValue;
            public double yValue;
        }

See Also