Drilldown Charts

The Kendo UI Chart supports drilldown functionality for exploring data.

The drilldown function allows users to click on a point (bar, pie segment, etc.) in order to navigate to a different view. The new view usually contains finer grained data about the selected item, like breakdown by product of the selected category.

The view hierarchy is displayed in a breadcrumb for easy navigation back to previous views.

Getting Started

To configure a chart series for drilldown operation:

• Set drilldownField to a field that contains the drilldown value. For categorical charts, this is typically the category field.
• Add a kendoChartDrilldownSeries template to the series to define the drilldown series.
• Add a kendo-chart-breadcrumb component and link it to the Chart using a template variable.

Drilling Down with Async Data

To populate drilldown series on demand, bind their data inputs to Observables and use async pipe.

Customizing the Breadcrumb Root Item

To customize the root item of the chart Breadcrumb, set the rootItem input to an object implementing the BreadCrumbItem interface.

Custom Navigation

To implement a custom drilldown navigation:

• Handle the drilldown event to append new drilldown levels to the navigation.
• Set the drilldownLevel as to return to a previous level.

Suggested Links

• Angular Charts Homepage
• Breadcrumb - Overview
• API Reference of the Angular Charts
• Glossary