New to Telerik UI for ASP.NET Core? Download free 30-day trial

Plotting a Threshold Line in a DrillDown Series Chart


Product Telerik UI for ASP.NET Core Upload
Progress Telerik UI for ASP.NET Core version Created with the 2023.3.1010 version


By design, the defined plot band in the DrillDown Chart will be visible on each view. How can I plot a threshold line only in the first series?


  1. Handle the DrillDown event of the Chart and remove the plotBands settings from the initial Chart options.
  2. Handle the DrilldownSeriesFactory event that triggers when the current drill-down level has changed and set back the plot bands when the level is 0.

Here is a sample implementation:


    .Events(ev => ev.DrilldownLevelChange("onDrilldownLevelChange").Drilldown("onDrillDown"))
       @addTagHelper *, Kendo.Mvc

        <kendo-chartbreadcrumb name="cb" chart="chart"></kendo-chartbreadcrumb>

        <kendo-chart name="chart" on-drilldown="onDrillDown" on-drilldown-level-change="onDrilldownLevelChange">
          <!-- Other configuration -->
var initialPlotBands = [];

function onDrillDown(e) {
    initialPlotBands = e.sender.options.valueAxis.plotBands; // Store the initial plot bands options.
    e.sender.options.valueAxis.plotBands = null; // Remove the plotBands options.
    e.sender.redraw(); // Redraw the chart using the currently loaded data.

function onDrilldownLevelChange(e) {
    if (e.level === 0) { // Check if the current level is the first one.
        e.sender.options.valueAxis.plotBands = initialPlotBands; // Retrieve back the initial plot bands for the first series.

More ASP.NET Core DrillDown Chart Resources

See Also

In this article