Search results

Get the data of clicked area in accumulation chart

26 Oct 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.

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