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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148828 Nov 5,2019 07:45 PM UTC Nov 6,2019 02:13 PM UTC ASP.NET Core - EJ 2 1
loading
Tags: Charts
Scott Hancock
Asked On November 5, 2019 07:45 PM UTC

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 [Syncfusion]
Replied On November 6, 2019 02:13 PM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon