There are two workarounds you can use in the meantime
- Use string representations of the dates instead of actual dates. In this manner you can bind the chart to strings and use a "regular" categorical axis and then the plot bands will work based on the index of the item. In such a case you will need to aggregate the data yourself before passing it to the chart.
- Using the Kendo Chart widget directly, and here is an example of using date objects and adding plot bands dynamically: https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/dynamic-plot-bands
Here is also a basic example of fetching the Kendo Chart scripts through a hidden RadHtmlChart so that you can easily use the Kendo Chart widget
<script>
var myData = [{
"day": new Date("2014/01/01")
}, {
"day": new Date("2014/01/02")
}, {
"day": new Date("2014/01/31")
}];
function addPlotBand() {
$ = $telerik.$;
var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
var options = {};
options["categoryAxis"] = {
plotBands: [{
from: start,
to: end,
color: "green"
}]
};
$("#chart2").data("kendoChart").setOptions(options);
}
function pageLoad() {
$ = $telerik.$;
$("#chart2").kendoChart({
dataSource: {
data: myData
},
categoryAxis: {
type: "date",
field: "day"
}
});
}
</script>
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" OnClientClicked="addPlotBand" Text="add plotband" />
<div id="chart2"></div>
<telerik:RadHtmlChart runat="server" ID="chart" Style="visibility: hidden;">
<PlotArea>
<XAxis DataLabelsField="day">
</XAxis>
</PlotArea>
</telerik:RadHtmlChart>