1. Home
  2. Forum
  3. Angular - EJ 2
  4. Can we make drill down from One chart to another Chart

Can we make drill down from One chart to another Chart

Hello Team , 

I am trying to use drill down feature in my application. 
So i need some information from your side i.e 
First if i have column chart in first level and now if i need next level to be in pie chart or doughnut chart So can it be possible and vise versa.

if you can provide me list for the drill down support chart it will be great help from syncfusion team.
Please provide me ASAP. 
Thanks, 
Sourabh


3 Replies
NP Nishanthi Panner Selvam Syncfusion Team June 27, 2023 12:38 PM UTC

Hi Sourabh,


Greetings from Syncfusion.


The drilldown functionality is supported for all chart types and this is achieved by updating the chart series data points using refresh method in pointClick event which is triggered which clicking a point in a chart series. We already have an online demo for pie chart. Please check with the below link.


Pie :
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chart/drill-down-pie


We have prepared drilldown sample for column chart. This same approach is applicable for all cartesian type charts.


Column : https://stackblitz.com/edit/angular-tcyiuj-5vazqr


Please revert us if you have any concerns.


Regards,

Nishanthi


SS Sourabh Sharma June 30, 2023 10:31 AM UTC

Hello  Nishanthi Panner Selvam,

I have checked for column and pie but if i need to go in this type of drill down 

Column => Pie => StackColumn

like different control can we make through drill down i.e ejsChart => accumulation chart => ejsChart

for this can you provide any Example will be so helpful.

thanks ,
Sourabh


SS Soundeswari Selvam Syncfusion Team July 3, 2023 02:57 PM UTC

Hi Sourabh Sharma,

To achieve the desired interaction of clicking on a column chart to move the pie chart, you would need to include the column chart component and handle the click event to update the data and title of the pie chart accordingly. We have also created a sample for your reference.

[app.component.html]

<div id="accumulation">

    <ejs-accumulationchart id="container1" #piechart>

        <e-accumulation-series-collection>

            <e-accumulation-series [dataSource]="" xName="x" yName="y">

            </e-accumulation-series>

        </e-accumulation-series-collection>

    </ejs-accumulationchart>

</div>


Sample: https://stackblitz.com/edit/angular-tcyiuj-jsadfm?file=app.component.ts,app.component.html 

We hope this information helps you in resolving your concern. If you have any further queries or require further assistance, please let us know.


Regards,

Soundeswari Selvam


Loader.
Up arrow icon