New to Telerik UI for Blazor? Start a free 30-day trial

DrillDown Charts

Updated on Sep 16, 2026

The Telerik UI for Blazor Chart supports drilldown functionality for exploring data.

The drill-down feature allows the users to click on a data point (for example, bar, column, pie segment, etc.) to navigate to a different view that contains finer-grained data like breakdown by product of the selected category. The view hierarchy can be displayed in a Breadcrumb for easy navigation back to previous views.

Configuring DrillDown Charts

To configure Chart series for drill-down:

  1. Prepare the data in the appropriate format. Each series data that will be drilled-down must contain a property of type ChartSeriesDescriptor. The descriptor includes all the parameters of the ChartSeries tag and acts as a container holding information about the series displayed upon user-initiated drill-down.
  2. Specify the drilldown field (the ChartSeriesDescriptor field) of the series data by using the ChartSeries.DrilldownField or ChartSeriesDescriptor.DrilldownField property.

Chart DrillDown

Example
View Source
Loading ...

Configuring Breadcrumb Navigation

Optionally, you can display a Breadcrumb component to show the drill-down levels.

  1. Declare a TelerikChartBreadcrumb component.
  2. Set the ChartId parameter of the Breadcrumb. It must match the Id of the Chart that will be associated with the Breadcrumb.

Configuring Breadcrumb for Chart Drilldown

Example
View Source
Loading ...

Reset Drilldown Level

To reset the drilldown level programmatically, use the ResetDrilldownLevel method of the Chart. To invoke the method, obtain a reference to the Chart instance with the @ref directive.

Reset Chart Drilldown Level Programmatically

Example
View Source
Loading ...

See Also