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.
<div>
<label id="lbl"></label>
</div>
<ejs-accumulationchart id="piecontainer" title="Income Tax" enableSmartLabels="true" pointClick="PointClick">
<e-accumulation-series-collection>
<e-accumulation-series dataSource="ViewBag.dataSource" xName="xValue" yName="yValue"
type="Pie"
startAngle="0" endAngle="360"
innerRadius="0%" radius="70%">
</e-accumulation-series>
</e-accumulation-series-collection>
</ejs-accumulationchart>
<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;
}