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

drill down bar chart multi stack

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

1 Reply

BP Baby Palanidurai Syncfusion Team 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.

Loader.
Live Chat Icon For mobile
Up arrow icon