We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

When clicking a stacked bar chart, get data for the other bars in the same column

I can click on a stacked bar chart and get access to it's datasource. What I want to do is when to get the datasources for the other bars in the same column. For example, I have a chart with months along the x access and the y access is the amount sold. There are 3 series apples, oranges and pears. I click on apples in the January column and I can get it's data. What I want is the get the data for oranges and pears. What I want to do is when you click on apples, pears or oranges in January I can get the number of each so I can show the percentages of each sold in January. Is this possible?

1 Reply

SM Srihari Muthukaruppan Syncfusion Team November 6, 2019 09:13 AM

Hi Scott, 

Greetings from Syncfusion. 

We have analyzed your query. From that, we suggest you to use “pointClick” event to achieve your requirement. Based on your requirement we have prepared a sample for your reference. Please find the sample and code snippet below. 

Code Snippet: 
<ejs-chart id="container" load="window.onChartLoad" title="Sales Comparison" PointClick="pointClick"> 
    <e-chart-primaryxaxis valueType="Category"> 
        <e-majorgridlines width="0"></e-majorgridlines> 
        <e-series dataSource="ViewBag.dataSource" xName="x" yName="y" name="Apple" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series> 
        <e-series dataSource="ViewBag.dataSource1" xName="x" yName="y" name="Orange" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series> 
        <e-series dataSource="ViewBag.dataSource2" xName="x" yName="y" name="Pears" width=2 type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar"></e-series> 
     var pointClick = function (args) { 
         var chart = document.getElementById("container").ej2_instances[0]; 
         console.log('month:' +chart.series[0].dataSource[args.pointIndex].x + " " + 'Apple: ' + chart.series[0].dataSource[args.pointIndex].y); 
         console.log('month:' +chart.series[1].dataSource[args.pointIndex].x + " " + 'Orange: ' + chart.series[1].dataSource[args.pointIndex].y); 
         console.log('month:' +chart.series[2].dataSource[args.pointIndex].x + " " + 'Pears: ' + chart.series[2].dataSource[args.pointIndex].y); 


Let us know if you need further assistance. 

Srihari M 

Live Chat Icon For mobile
Up arrow icon