How to display plotBands by date on a Kendo chart? - kendo-ui

Question

I have been trying to add plotBands by date on a kendo chart as in the snippet. plotBands doesn't seems to be at the correct position.
Note the TimeWindows object at the snippet. It should start after the first point.
tideSet is the object with Tides and TideWindows collections
How can I configure plotBands in the correct positions?
var tideSet={
"Tides":[
{
"timeStamp":"2018-07-24T00:33:00",
"pred":0.660
},
{
"timeStamp":"2018-07-24T06:09:00",
"pred":6.350
},
{
"timeStamp":"2018-07-24T12:32:00",
"pred":0.400
},
{
"timeStamp":"2018-07-24T18:51:00",
"pred":7.410
},
{
"timeStamp":"2018-07-25T01:19:00",
"pred":0.570
},
{
"timeStamp":"2018-07-25T06:58:00",
"pred":6.380
}
],
"TideWindows":[
{
"WindowsStart":"2018-07-24T02:03:00",
"WindowEnd":"2018-07-24T08:39:00"
}
]
};
var plots = new Array();
for (var i = 0; i < tideSet.TideWindows.length; i++) {
plots.push(
{
from: new Date(tideSet.TideWindows[i].WindowsStart),
to: new Date(tideSet.TideWindows[i].WindowEnd),
color: "#007eff"
});
}
$("#kendoChartTides").kendoChart({
dataSource: {
data: tideSet.Tides,
schema: {
model: {
fields: {
pred: { type: "string" },
timeStamp: { type: "date" }
}
}
}
},
series: [{
type: "line",
style: "smooth",
field: "pred",
categoryField: "timeStamp"
}],
title: {
text: "Tides"
},
valueAxis: {
title: {
text: "Predictions"
}
},
categoryAxis: {
field: "timeStamp",
type: "date",
labels: {
rotation: 40,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #"
},
baseUnit:"minutes",
baseUnitStep: "auto",
plotBands: plots
},
tooltip:
{
visible: true,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(category)) # <br /> Value: #= value # "
}
});
<link href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script></head>
<div id="kendoChartTides"> </div>

Answer 1

This happens because the plot bands are aligned to the category axis' steps. You currently have your chart's baseUnitStep to "auto". This causes the steps to be too far apart and your plot bands get "rounded" to the nearest steps, so to speak. Here's what you can do to work around this problem:
Change the baseUnitStep to 1. This will give you a precision of 1
minute for your plot bands. However this will also result in grid
lines and axis labels at an interval of 1 minute, which will be slow
and look horrible. We'll fix that in the following steps.
Add a step value of 180 (or similar) to your labels' config. This will make the
category labels appear every 3 hours.
Add a majorGridLines configuration section and set the step of the grid lines to 180, so that they appear as frequently as the labels.
Add a majorTicks config section and set the step interval to 60 or something.
Your categoryAxis config section should look similar to this:
categoryAxis: {
field: "timeStamp",
type: "date",
labels: {
rotation: 40,
template: "#= kendo.format('{0:dd/HH:mm}', new Date(value)) #",
step: 180
},
baseUnit:"minutes",
baseUnitStep: 1,
plotBands: plots,
majorTicks: {
step: 60
},
majorGridLines: {
visible: true,
step: 180
}
}
You can see your code snippet with these changes on this dojo: https://dojo.telerik.com/EFEjezoR