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
drilldownFieldto a field that contains the drilldown value. For categorical charts, this is typically the category field. - Add a
kendoChartDrilldownSeriestemplate to the series to define the drilldown series. - Add a
kendo-chart-breadcrumbcomponent 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
drilldownevent to append new drilldown levels to the navigation. - Set the
drilldownLevelas to return to a previous level.
Drilldown with Options
To configure drilldown without nested series components, set drilldownField and drilldownSeriesFactory on each series.
The factory receives a DrilldownEvent and returns one or more series for the next level.
Return null, undefined, or an empty array to keep the current level.
The following example creates product series from the selected company's data and provides Breadcrumb navigation.
Use the drilldown event and preventDefault() to cancel navigation.
Set drilldownLevel to a previous level to navigate back programmatically.
A new options or series input resets factory-based drilldown to the root.
Functions are not JSON-serializable. Attach each drilldownSeriesFactory function after you load chart options from a server or restore persisted settings.