Get the data of clicked area in accumulation chart

17 Feb 20225 minutes to read

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.

CSHTML

@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>

Click-data.cs

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;
        }