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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

drill down bar chart multi stack

Thread ID:

Created:

Updated:

Platform:

Replies:

143786 Apr 4,2019 06:47 PM UTC Apr 5,2019 10:31 AM UTC Angular - EJ 2 1
loading
Tags: Chart
Vinod
Asked On April 4, 2019 06:47 PM UTC

Hi 
i am looking for multi stack and drill down bar chart 
thanks

Baby Palanidurai [Syncfusion]
Replied On April 5, 2019 10:31 AM UTC

Hi Vinod, 

We have analyzed your query. We can achieve your requirement using pointRegionClick event, in this, we can get the current point index. Based on the point index we have rendered the information with new data.  

Please find the below code  snippet to achieve this requirement, 

$("#container").ejChart( 
            { 
               commonSeriesOptions: 
                { 
                    type: 'stackingbar', 
                }, 
                series: 
                [ 
                    { 
                        points: [{ x: "SUV", y: 25, text: '25%' },  
                            . . . 
                            . . . other points 
                        ], 
                    },      
                   { 
                        points: [{ x: "SUV", y: 20, text: '20%' }, 
                            . . . 
                            . . . other points 
                        ], 
                    } 

                ], 
                . . .  
                . . . other customization 
                pointRegionClick: 'onclick', 
            }); 

function onclick(sender) { 
       var pointIndex = sender.data.region.Region.PointIndex; 
       var seriesIndex =sender.data.region.SeriesIndex; 
       document.getElementById("text").innerHTML=sender.model._visibleSeries[0]._visiblePoints[pointIndex].x; 
          $("#container").ejChart("option", { "drilldown": barSeries(pointIndex, seriesIndex) }); // here drill down the clicked point index 
       document.getElementById("symbol").style.visibility = "visible"; 
   } 

function barSeries(index, seriesIndex) { 
if (seriesIndex == 0) { 
  if (index == 0) { 
  return { 
          series: 
            [ 
            { 
            points: [{ x: "Toyota", y: 8, text: 'Toyota 8%' }, 
                                           . . . 
                                           . . . other points 
                                           ], 
                                           . . . 
                                           . . . other customization 
            } 
           ], 
     }; 
  } else { 
  . . .  
  . . . as like the index 0 customize the other indexes  
  } 
} else if(seriesIndex == 1){ 

} else { 
// give the initial series collections. This is for when click the  back from the drilled series. 
} 
} 


Screenshot: 
Initial rendering:  
 

After drill down: 
 


Sample for your reference, can be found from below link, 

If the above is doesn’t meet your requirement, kindly revert us with clear details about your requirement which will be helpful in furthermore analysis and provide you the solution  sooner. 

Regards, 
Baby.

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