Drilldown Charts
The KendoReact Charts 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:
- Set the
drilldownFieldprop to a field that contains the drilldown value. For categorical charts, this is typically the category field. - Create a component that will create the
ChartSeriesItemfor the detail series. The component should pass all props to the series. - Set the
drilldownSeriesFactoryprop to the component that will create the series. - Add a
ChartBreadcrumbcomponent. - Add a state variable to store the
ChartDrilldownState. - Add a shared handler for the Chart
onDrilldownevent and the BreadcrumbonDrilldownStateChangeevent. Set the state variable to thenextStatepassed to the handler.
Adding Drilldown Levels
To add a drilldown level, set the drilldownSeriesFactory prop on the parent series to a component that returns a ChartSeriesItem for the drilldown series. The component must pass all props to the ChartSeriesItem component.
The following example demonstrates a Drilldown Chart with 3 levels.
Customizing the Breadcrumb Root Item
To customize the root item of the Chart Breadcrumb, set the rootItem prop to an object implementing the Breadcrumb DataModel interface.
Custom Navigation
To implement a custom drilldown navigation:
- Add a navigation component, such as the
Breadcrumb. - Add a state variable to store the
ChartDrilldownState. - Update the navigation with the current dropdown level in the
onDrilldownhandler for the Chart. - Update the drilldown state after navigation.