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
- Handle the
DrillDownevent of the Chart and remove theplotBandssettings from the initial Chart options. - Handle the
DrilldownSeriesFactoryevent that triggers when the current drill-down level has changed and set back the plot bands when the level is0.
Here is a sample implementation:
@(Html.Kendo().ChartBreadcrumb()
.Name("cb")
.Chart("chart")
)
@(Html.Kendo().Chart<ChartViewModel>()
.Name("chart")
...
.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 -->
</kendo-chart>
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();
}
}