ASP.NET Core

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

<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>

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

<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>

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

@{
        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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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

<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>

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 & Doughnut in ASP.NET Core Accumulation Chart control

Pie Chart

Radius Customization

Pie Center

Various Radius Pie Chart

Doughnut Chart

Start and End angles

Color & Text Mapping

Customization

Hide pie or doughnut border

Color Palette

See Also