Plotting a Threshold Line in a DrillDown Series Chart

Environment

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

Description

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?

Solution

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:

Razor

@(Html.Kendo().ChartBreadcrumb()
    .Name("cb")
    .Chart("chart")
)

@(Html.Kendo().Chart<ChartViewModel>()
    .Name("chart")
    ...
    .Events(ev => ev.DrilldownLevelChange("onDrilldownLevelChange").Drilldown("onDrillDown"))
)

Razor

       @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 -->
        </kendo-chart>

JS

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.
        e.sender.redraw();
    }
}

More ASP.NET Core DrillDown Chart Resources

• ASP.NET Core DrillDown Chart Documentation

• ASP.NET Core DrillDown Chart Demos

• ASP.NET Core Chart Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Chart for ASP.NET Core

• Server-Side API Reference of the Chart for ASP.NET Core

• Server-Side TagHelper API Reference of the Chart for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base