# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#drilldownfield) to a field that contains the drilldown value. For categorical charts, this is typically the category field.
* Add a [`kendoChartDrilldownSeries`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesdrilldowntemplatedirective) template to the series to define the drilldown series.
* Add a [`kendo-chart-breadcrumb`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartbreadcrumbcomponent) component and link it to the Chart using a [template variable](https://angular.io/guide/template-reference-variables).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/drilldown/basic/source.txt)

## Drilling Down with Async Data

To populate drilldown series on demand, bind their [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#data) inputs to [`Observable`s](https://rxjs.dev/guide/observable)
and use [async pipe](https://angular.io/api/common/AsyncPipe).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/drilldown/async/source.txt)

## Customizing the Breadcrumb Root Item

To customize the root item of the chart Breadcrumb, set the [`rootItem`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartbreadcrumbcomponent#rootitem) input to
an object implementing the [`BreadCrumbItem`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem) interface.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/drilldown/breadcrumb-custom-root/source.txt)

## Custom Navigation

To implement a custom drilldown navigation:

* Handle the [`drilldown`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drilldown) event to append new drilldown levels to the navigation.
* Set the [`drilldownLevel`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drilldownlevel) as to return to a previous level.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/drilldown/custom-navigation/source.txt)

## Drilldown with Options

To configure drilldown without nested series components, set [`drilldownField`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#drilldownfield) and [`drilldownSeriesFactory`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/series#drilldownseriesfactory) on each series.
The factory receives a [`DrilldownEvent`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/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](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartbreadcrumbcomponent).

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/chart/drilldown/options/source.txt)

Use the [`drilldown`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#drilldown) event and [`preventDefault()`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/drilldownevent#preventdefault) to cancel navigation.
Set [`drilldownLevel`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/chartcomponent#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.

## Suggested Links

* [Angular Charts Homepage](https://www.telerik.com/kendo-angular-ui/charts)
* [Breadcrumb - Overview](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/breadcrumb)
* [API Reference of the Angular Charts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Glossary](https://www.telerik.com/kendo-angular-ui-develop/components/charts/glossary)