Pie and Donut in ASP.NET MVC 3D Circular Chart Component
18 Mar 202414 minutes to read
Pie chart
To render a pie series, use the series Type as Pie.
@Html.EJS().CircularChart3D("container").Tilt(-45).Series(series =>
{
series.XName("X").YName("Y").DataSource(ViewBag.dataSource).Add();
}
).LegendSettings(leg => leg.Visible(false)).Render()public IActionResult Index()
{
List<CircularChartData> circularData = new List<CircularChartData>
{
new CircularChartData { X = "Jan", Y = 3 },
new CircularChartData { X = "Feb", Y = 3.5 },
new CircularChartData { X = "Mar", Y = 7 },
new CircularChartData { X = "Apr", Y = 13.5 },
new CircularChartData { X = "May", Y = 19 },
new CircularChartData { X = "Jun", Y = 23.5 },
new CircularChartData { X = "Jul", Y = 26 },
new CircularChartData { X = "Aug", Y = 25 },
new CircularChartData { X = "Sep", Y = 21 },
new CircularChartData { X = "Oct", Y = 15 }
};
ViewBag.dataSource = circularData;
return View();
}
public class CircularChartData
{
public string X;
public double Y;
}Radius customization
By default, the radius of the pie series will be 80% of the size, which is the minimum of the 3D Circular Chart’s width and height. You can customize this by using the Radius property of the series.
@Html.EJS().CircularChart3D("container").Tilt(-45).Series(series =>
{
series.XName("X").YName("Y").Radius("100%").DataSource(ViewBag.dataSource).Add();
}
).LegendSettings(leg => leg.Visible(false)).Render()public IActionResult Index()
{
List<CircularChartData> circularData = new List<CircularChartData>
{
new CircularChartData { X = "Jan", Y = 3 },
new CircularChartData { X = "Feb", Y = 3.5 },
new CircularChartData { X = "Mar", Y = 7 },
new CircularChartData { X = "Apr", Y = 13.5 },
new CircularChartData { X = "May", Y = 19 },
new CircularChartData { X = "Jun", Y = 23.5 },
new CircularChartData { X = "Jul", Y = 26 },
new CircularChartData { X = "Aug", Y = 25 },
new CircularChartData { X = "Sep", Y = 21 },
new CircularChartData { X = "Oct", Y = 15 },
new CircularChartData { X = "Nov", Y = 15 },
new CircularChartData { X = "Dec", Y = 15 }
};
ViewBag.dataSource = circularData;
return View();
}
public class CircularChartData
{
public string X;
public double Y;
}Various radius pie chart
You can assign different radii to each slice of the pie by fetching the radius from the data source and using it with the Radius property in the Series.
@Html.EJS().CircularChart3D("container").Tilt(-15).Title("Countries compared by population density and total area").Series(series =>
{
series.XName("X").YName("Y").Radius("R").InnerRadius("20%")
.DataLabel(dl => dl.Visible(true).Position(Syncfusion.EJ2.Charts.CircularChart3DLabelPosition.Outside).Name("X"))
.DataSource(ViewBag.dataSource).Add();
}
).EnableAnimation(true).LegendSettings(leg => leg.Visible(true)).Render()public IActionResult Index()
{
List<CircularChartData> circularData = new List<CircularChartData>
{
new CircularChartData { X = "Belgium", Y = 551500, R = "110.7" },
new CircularChartData { X = "Cuba", Y = 312685, R = "124.6" },
new CircularChartData { X = "Dominican Republic", Y = 350000, R = "137.5" },
new CircularChartData { X = "Egypt", Y = 301000, R = "150.8" },
new CircularChartData { X = "Kazakhstan", Y = 300000, R = "155.5" },
new CircularChartData { X = "Somalia", Y = 357022, R = "160.6" },
new CircularChartData { X = "Argentina", Y = 505370, R = "100" }
};
ViewBag.dataSource = circularData;
return View();
}
public class CircularChartData
{
public string X;
public double Y;
public string R;
}Donut chart
To achieve a donut in the pie series, customize the InnerRadius property of the series. By setting a value greater than 0%, a donut will appear. The InnerRadius property takes value from 0% to 100% of the pie radius.
@Html.EJS().CircularChart3D("container").Tilt(-45).Series(series =>
{
series.XName("X").YName("Y").InnerRadius("40%").DataSource(ViewBag.dataSource).Add();
}
).LegendSettings(leg => leg.Visible(false)).Render()public IActionResult Index()
{
List<CircularChartData> circularData = new List<CircularChartData>
{
new CircularChartData { X = "Jan", Y = 3 },
new CircularChartData { X = "Feb", Y = 3.5 },
new CircularChartData { X = "Mar", Y = 7 },
new CircularChartData { X = "Apr", Y = 13.5 },
new CircularChartData { X = "May", Y = 19 },
new CircularChartData { X = "Jun", Y = 23.5 },
new CircularChartData { X = "Jul", Y = 26 },
new CircularChartData { X = "Aug", Y = 25 },
new CircularChartData { X = "Sep", Y = 21 },
new CircularChartData { X = "Oct", Y = 15 },
new CircularChartData { X = "Nov", Y = 15 },
new CircularChartData { X = "Dec", Y = 15 }
};
ViewBag.dataSource = circularData;
return View();
}
public class CircularChartData
{
public string X;
public double Y;
}Text and fill color mapping
The text and the fill color from the data source can be mapped to the 3D Circular Chart using PointColorMapping in the series and Name in the data label, respectively.
@Html.EJS().CircularChart3D("container").Tilt(-45).Series(series =>
{
series.XName("X").YName("Y").PointColorMapping("Fill").DataLabel(dl => dl.Visible(true).Name("Text"))
.DataSource(ViewBag.dataSource).Add();
}
).LegendSettings(leg => leg.Visible(false)).Render()public IActionResult Index()
{
List<CircularChartData> circularData = new List<CircularChartData>
{
new CircularChartData { X = "Jan", Y = 3, Fill = "#498fff", Text = "January" },
new CircularChartData { X = "Feb", Y = 3.5, Fill = "#ffa060", Text = "February" },
new CircularChartData { X = "Mar", Y = 7, Fill = "#ff68b6", Text = "March" },
new CircularChartData { X = "Apr", Y = 13.5, Fill = "#81e2a1", Text = "April" }
};
ViewBag.dataSource = circularData;
return View();
}
public class CircularChartData
{
public string X;
public double Y;
public string Fill;
public string Text;
}Customization
Individual points in pie chart can be customized using the PointRender event.
@Html.EJS().CircularChart3D("container").Tilt(-45).PointRender("pointRender").Series(series =>
{
series.XName("X").YName("Y").DataSource(ViewBag.dataSource).Add();
}
).LegendSettings(leg => leg.Visible(false)).Render()
<script>
var pointRender = function(args) {
if ((args.point.x).indexOf('Apr') > -1) {
args.fill = '#f4bc42';
}
else if ((args.point.x).indexOf('Mar') > -1) {
args.fill = '#DE3D8A';
}
else if ((args.point.x).indexOf('Feb') > -1) {
args.fill = '#F7523F';
}
else {
args.fill = '#597cf9';
}
}
</script>public IActionResult Index()
{
List<CircularChartData> circularData = new List<CircularChartData>
{
new CircularChartData { X = "Jan", Y = 3 },
new CircularChartData { X = "Feb", Y = 3.5 },
new CircularChartData { X = "Mar", Y = 7 },
new CircularChartData { X = "Apr", Y = 13.5 }
};
ViewBag.dataSource = circularData;
return View();
}
public class CircularChartData
{
public string X;
public double Y;
}