highcharts Unable to create plotbands - highcharts

Question

Im trying to create plotbands but does not work correctly.
Here is my fiddle and code.
https://jsfiddle.net/z0h85fku/
Javascript
$(function() {
categories = ["09/07/2016 00:00", "09/07/2016 00:01", "09/07/2016 00:02", "09/07/2016 00:03", "09/07/2016 00:04"]
rate_1 = [0.8, 0.54, 0.6, 0.3, 0.4]
rate_2 = [0.33, 0.16, 0.33, 0.3, 0.38]
rate_3 = [0.03, 0.04, 0.05, 0.03, 0.01]
var addCallout = function(chart) {
$('.callout').remove();
var xAxis = chart.xAxis[0],
yAxis = chart.yAxis[0],
series = chart.series[0],
point = series.data[0];
console.log('xAxis == ', xAxis)
console.log('yAxis == ', yAxis.toPixels)
console.log('series == ', series)
console.log('point == ', point)
console.log(point.plotY)
console.log(point.plotX)
var a = chart.renderer.label('<div class="callout top">This is the callout text!</div>', point.plotX + chart.plotLeft - 20,
point.plotY + chart.plotTop - 70, 'callout', null, null, true).add();
};
$('#container').highcharts({
chart: {
// type: 'bar',
events: {
load: function() {
addCallout(this);
},
redraw: function() {
addCallout(this);
},
}
},
title: {
text: 'Spikes Graph',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
events: {
load: function() {
// addCallout(this);
},
redraw: function() {
addCallout(this);
},
},
series: [{
turboThreshold: 2000 // to accept point object configuration
}],
xAxis: {
categories: categories,
<!-- tickInterval: 60,-->
plotBands: [{
color: 'orange', // Color value
// from: Date.UTC(09/07/2016 02:00), // Start of the plot band
// Date.UTC(year,month,day,hours,minutes,seconds,millisec)
from: Date.UTC(2016,9,7,0,0),
to: Date.UTC(2016,9,7,4,0)
// to: '09/07/2016 05:00' // End of the plot band
}],
type:'datetime'
},
yAxis: {
title: {
text: 'Error Rate'
},
min: 0,
max: 5,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
labels: {
format: '{value} %'
}
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
// {turboThreshold: 2000 },
{
name: 'Rate-1',
data: rate_1,
turboThreshold: 2000,
lineWidth: 1,
dataLabels: {
enabled: true,
useHTML: true,
style: {
fontWeight: 'bold'
},
},
}, {
name: 'Rate-2',
data: rate_2,
turboThreshold: 2000,
lineWidth: 1
}, {
name: 'Rate-3',
data: rate_3,
turboThreshold: 2000,
lineWidth: 1
}
]
});
});