Creating Charts with Drill-Down Support

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI for Angular Chart

Description

How can I create a Chart with a drill-down functionality?

Solution

The Chart component provides built-in Drilldown support. For the official Drilldown feature, see Chart Drilldown.

This article demonstrates how to implement custom drill-down functionality by handling the SeriesClickEvent and manually managing chart data.

To create a custom drill-down implementation:

1. Handle the SeriesClickEvent to retrieve the required subset of data items.

2. Render a new Chart which uses the retrieved data subset by using either of the following approaches:

• Use the *ngIf structural directive to render a new chart.
• Update the data of the current chart.

The following example demonstrates how to implement the custom drill-down functionality with a Bar Chart.

Change Theme

Theme

Loading ...

The following example demonstrates how to implement the custom drill-down functionality with a Pie Chart.

Change Theme

Theme

Loading ...