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

[Scott Hancock]

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?

[Srihari Muthukaruppan]

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. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PointClick2069119829.zip  

 

Code Snippet: 

 

Index.cshtml: 

<ejs-chart id="container" load="window.onChartLoad" title="Sales Comparison" PointClick="pointClick"> 

    <e-chart-primaryxaxis valueType="Category"> 

        <e-majorgridlines width="0"></e-majorgridlines> 

    </e-chart-primaryxaxis> 

    <e-series-collection> 

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

    </e-series-collection> 

</ejs-chart> 

<script> 

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

     }; 

</script> 

Screenshot: 

 

Let us know if you need further assistance. 

Regards, 

Srihari M