Drill Down functionality
Hi Hari,
Greetings from Syncfusion.
We can drill down the chart based on your requirement by using the legendClick event in the Chart. When we click on the legend, the legendClick event gets triggered. In that event, we can change the data of the second chart based on the data in the clicked legend. We have created a simple angular application to demonstrate the same. Please find the below stackblitz link for your sample reference.
Sample link: https://stackblitz.com/edit/angular-2w214c-2mjcpr?file=app.component.html
Code Snippet:
|
<ejs-chart (legendClick)='clickLegend($event)' id='chartcontainer'></ejs-chart> <ejs-chart #chart2 id='chartcontainer1'></ejs-chart>
public clickLegend(args: ILegendClickEventArgs): void { this.chart2.series[0].visible = true; this.chart2.annotations[0].content = ""; if (args.legendText == "SUV") { this.chart2.series[0].dataSource = this.data; } else if (args.legendText == "Cars") { this.chart2.series[0].dataSource = this.cars; } else if (args.legendText == "Pickups") { this.chart2.series[0].dataSource = this.pickups; } else if (args.legendText == "Mini vans") { this.chart2.series[0].dataSource = this.pickups; } this.chart2.series[0].name = args.legendText; this.chart2.refresh(); }; |
Screenshot:
Initial Rendering
After clicking on the legend
Kindly, revert us if you have any concerns.
Regards,
Swetha
