By using the pointClick
event, you can get the chart data of clicked area.
To show the clicked area data from pie, follow the given steps:
Step 1:
By using the pointClick
event, you can get the args.point.x
and args.point.y
values.
@Html.EJS().AccumulationChart("piecontainer").Series(series =>
{
series.DataSource(ViewBag.dataSource)
.XName("xValue")
.YName("yValue")
.Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
.Radius("70%")
.StartAngle(0)
.EndAngle(360)
.InnerRadius("0%")
.Add();
}).EnableSmartLabels(false).PointClick("PointClick").Title("Income Tax").Render()
<script>
var PointClick = function (args) {
document.getElementById("lbl").innerText = "X : " + args.point.x + "\nY : " + args.point.y;
}
</script>
public IActionResult Index()
{
List<ChartData> chartData = new List<ChartData>
{
new ChartData { xValue = "Chrome", yValue = 37, text = "37%"},
new ChartData { xValue = "UC Browser", yValue = 17, text = "17%"},
new ChartData { xValue = "iPhone", yValue = 19, text = "19%"},
new ChartData { xValue = "Others", yValue = 4 , text = "4%"},
new ChartData { xValue = "Opera", yValue = 11, text = "11%"},
new ChartData { xValue = "Android", yValue = 12, text = "12%"},
};
ViewBag.dataSource = chartData;
return View();
}
public class ChartData
{
public string xValue;
public double yValue;
public string text;
}