Programmatically add plotbands kendo charts - kendo-asp.net-mvc

Question

kendo version 2015.1.429
I can't figure out why this doesn't work. I've been fighting with it for hours to no avail. I've tried all sorts of variations on the axis name, etc.
Any ideas?
#(Html.Kendo().Chart<OTIS.AppServ.Reporting.ViewModels.ItemDailyForecast>()
.Name("chart_ItemForecastByDay")
.Theme("Silver")
.HtmlAttributes(new { #class = "widgetFullWidth" })
.Title("Item Daily Forecast")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
.Visible(true)
)
.Events(events => events
.Render("hideChartLoadingImage")
)
.AutoBind(true)
.DataSource(ds => ds
.Read(read => read.Action("GetItemForecastByDay", "InventoryReports", new { area = "Reporting", intItemId = Model, intDaysOut = 90}))
.Sort(sort =>
{
sort.Add(model => model.Date).Ascending();
})
)
.Series(series =>
{
series
.Line(model => model.DailyUnitBalanceQty)
//.Column(model => model.DailyUnitBalanceQty)
.Name("Units Avail")
//.Color("#5cbe2d")
.Aggregate(ChartSeriesAggregate.Sum)
.Axis("Axis1")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name # (#= kendo.toString(category, 'd') #, #= kendo.format('{0:n0}', value) #)")
)
;
})
.Series(series =>
{
series
.Line(model => model.DailyDaysOnHandQty)
//.Column(model => model.DailyDaysOnHandQty)
.Name("Days On Hand")
//.Color("#5cbe2d")
.Aggregate(ChartSeriesAggregate.Sum)
.Axis("Axis1")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name # (#= kendo.toString(category, 'd') #, #= kendo.format('{0:n0}', value) #)")
)
;
})
.Series(series =>
{
series
.Column(model => model.DailyReceiptQty)
.Name("Receipt Qty")
//.Color("#5cbe2d")
.Aggregate(ChartSeriesAggregate.Sum)
.Axis("Axis1")
.Spacing(0.0)
.Gap(0.0)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name # (#= kendo.toString(category, 'd') #, #= kendo.format('{0:n0}', value) #)")
)
;
})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Days)
.Categories(model => model.Date)
.Labels(labels => {
labels.Rotation(90);
}
)
.AxisCrossingValue(0, 1000)
)
.ValueAxis(axis => axis
.Numeric("Axis1")
.Labels(labels => labels.Format("{0:n0}"))
.PlotBands(bands =>
{
//bands.Add().From(-10).To(50).Color("#c00").Opacity(0.3);
bands.Add().From(49).To(50).Color("#c00").Opacity(0.8);
})
)
.ChartArea(chartArea => chartArea
.Background("transparent")
.Height(300)
)
.PlotArea(plotArea => plotArea
.Background("transparent")
//.Margin(40)
)
)
<script>
$(function(){
var chart = $("#chart_ItemForecastByDay").data("kendoChart");
options["categoryAxis"] = { plotBands: [{ from: "3/17/2019", to: "3/20/2019", color: "green", opacity: 0.3 }] };
options["yAxis"] = { plotBands: [{ from: 20, to: 30, color: "blue", opacity: 0.3 }] };
options["valueAxis"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
options["Axis1"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
chart.setOptions(options);
}
</script>

Answer 1

For Categorical Charts types we should use the categoryAxis and valueAxis plotBands.
<script>
var stats = [
{ value: 48, date: new Date("2014/01/01") },
{ value: 50, date: new Date("2014/01/02") },
{ value: 55, date: new Date("2014/01/03") },
{ value: 35, date: new Date("2014/01/04") },
{ value: 30, date: new Date("2014/01/05") },
{ value: 30, date: new Date("2014/01/20") },
{ value: 50, date: new Date("2014/01/21") },
{ value: 45, date: new Date("2014/01/22") },
{ value: 40, date: new Date("2014/01/23") },
{ value: 35, date: new Date("2014/01/24") },
{ value: 40, date: new Date("2014/01/25") },
{ value: 42, date: new Date("2014/01/26") },
{ value: 40, date: new Date("2014/01/27") },
{ value: 35, date: new Date("2014/01/28") },
{ value: 43, date: new Date("2014/01/29") },
{ value: 38, date: new Date("2014/01/30") },
{ value: 30, date: new Date("2014/01/31") }
];
$("#chart").kendoChart({
dataSource: {
data: stats
},
series: [{
type: "column",
aggregate: "avg",
field: "value",
categoryField: "date"
}],
categoryAxis: {
type: "date",
majorGridLines: {
visible: false
}
},
valueAxis: {
line: {
visible: false
}
}
});
$(function(){
var chart = $("#chart").data("kendoChart");
var options = {};
var fromDate = new Date("2014/01/15");
var toDate = new Date("2014/01/20");;
options["categoryAxis"] = { plotBands: [{ from: fromDate, to: toDate, color: "green", opacity: 0.3 }] };
options["valueAxis"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
chart.setOptions(options);
});
</script>
While for the Scatter Chart types we should use xAxis and yAxis plotBands
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Rainfall - Wind Speed"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "scatter"
},
series: [{
name: "January 2008",
data: [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
},{
name: "January 2009",
data: [
[6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
},{
name: "January 2010",
data: [
[21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1, 0], [16.4, 0], [16.4, 0]]
}],
xAxis: {
max: 35,
title: {
text: "Wind Speed [km/h]"
},
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "n1"
}
}
},
yAxis: {
min: -5,
max: 25,
title: {
text: "Rainfall [mm]"
},
axisCrossingValue: -5,
crosshair: {
visible: true,
tooltip: {
visible: true,
format: "n1"
}
}
}
});
var chart = $("#chart").data("kendoChart");
var options = {};
var fromDate = new Date("2014/01/15");
var toDate = new Date("2014/01/20");;
options["xAxis"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
options["yAxis"] = { plotBands: [{ from: -5, to: 0, color: "red", opacity: 0.3 }] };
chart.setOptions(options);
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>