Search results

Get the data of clicked area in accumulation chart

01 Dec 2021 / 1 minute 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.

razor
click-data.cs
Copied to clipboard
@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>
Copied to clipboard
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;
        }