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 drilldownField prop to a field that contains the drilldown value. For categorical charts, this is typically the category field.
• Create a component that will create the ChartSeriesItem for the detail series. The component should pass all props to the series.
• Set the drilldownSeriesFactory prop to the component that will create the series.
• Add a ChartBreadcrumb component.
• Add a state variable to store the ChartDrilldownState.
• Add a shared handler for the Chart onDrilldown event and the Breadcrumb onDrilldownStateChange event. Set the state variable to the nextState passed 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 onDrilldown handler for the Chart.
• Update the drilldown state after navigation.

Suggested Links

• Breadcrumb - Overview
• API Reference of the Charts
• KendoReact Charts