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.

Change Theme

Theme

Loading ...

Drilling Down with Async Data

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

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

Suggested Links

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