To render a pie series, use the series type
as Pie
.
@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;
}
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.
@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;
}
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.
@{
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;
}
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.
@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;
}
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.
@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;
}
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.
@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;
}
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.
@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;
}
Individual points can be customized using the pointRender
event.
@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;
}
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
.
@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;
}
You can customize the color the of the point using the palettes
property.
@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;
}