ASP.NET MVC
Demos
Support
Forum
Download
Search results

Pie & Doughnut

Pie Chart

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

razor
pie.cs
@using Syncfusion.EJ2;
@section ControlsSection{   
@(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
@using Syncfusion.EJ2;
@section ControlsSection{   
@(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;
        }

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
@using Syncfusion.EJ2;
@section ControlsSection{   
@(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
@using Syncfusion.EJ2;
@section ControlsSection{   
@(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
@using Syncfusion.EJ2;
@section ControlsSection{   
@(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
@using Syncfusion.EJ2;
@section ControlsSection{   
@(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;
        }

See Also

Previous
Next