ASP.NET MVC

Search results

Pie & Doughnut in ASP.NET MVC Accumulation Chart control

09 Jun 2021 / 2 minutes to read

Pie Chart

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

razor

pie.cs

@Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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.

razor

radius.cs

@Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .Radius("50%")
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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.

razor

piecenter.cs

@{
        var piecenter = new
        {
            x = "60%",
            y = "60%"
        };

       } 
             @Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataLabel(dl => dl.Visible(true).Name("text").Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Inside).Font(ft => ft.FontWeight("600")))
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .Radius("70%")
                      .DataSource(ViewBag.dataSource).Add();
            })
            .Center(piecenter)
            .EnableSmartLabels(true)
            .EnableAnimation(false)
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false))
            .Tooltip(tp => tp.Enable(true)).Render()

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.

razor

various-radius.cs

@Html.EJS().AccumulationChart("container")
    .Series(sr =>
    {
    sr.Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
    .XName("xValue")
    .YName("yValue")
    .DataLabel(dl => dl.Visible(true).Name("xValue").Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside))
    .InnerRadius("20%")
    .Radius("r")
    .DataSource(ViewBag.dataSource).Add();
    })
    .EnableSmartLabels(true)
    .EnableAnimation(true)
    .Tooltip(tp => tp.Enable(true).Format("${point.x} <br />Composition: <b>${point.y}</b>"))
    .LegendSettings(leg => leg.Visible(true)).Render()

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.

razor

doughnut.cs

@Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .InnerRadius("40%")
                      .ExplodeIndex(0).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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.

razor

start-angle.cs

@Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .StartAngle(90)
                      .EndAngle(270).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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.

razor

map.cs

@Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .PointColorMapping("fill")
                      .DataLabel(ViewBag.datalabel).Add();
            })
            .EnableSmartLabels(true)
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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.

razor

custom.cs

@Html.EJS().AccumulationChart("container").Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .Add();
            })
            .EnableSmartLabels(true)
            .PointRender("pointRender")
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

 <script>
            var pointRender = function (args) {
                if ((args.point.xValue as string).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.

razor

border.cs

@Html.EJS().AccumulationChart("container").EnableBorderOnMouseMove(false).Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .Add();
            })
            
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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.

razor

palette.cs

@Html.EJS().AccumulationChart("container").EnableBorderOnMouseMove(false).Series(series =>
            {
                series.DataSource(ViewBag.dataSource)
                      .XName("xValue")
                      .YName("yValue")
                      .Name("Browser")
                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
                      .palettes("['teal', 'skyblue', 'green', 'red']")
                      .Add();
            })
            
            .Title("Mobile Browser Statistics")
            .LegendSettings(ls => ls.Visible(false)).Render()

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