Whenever I try to use plotbands between two points on the x-axis and draw a line between those two points using pointLines, the line never appears. Strangely, if the same process is done on the yAxis, everything works perfectly fine. Here is my code:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
plotBands: [{ // marking the weekend
color: 'rgba(68, 170, 213, 0.2)',
from: Date.UTC(2010, 0, 2),
to: Date.UTC(2010, 0, 4)
}],
plotLines:[{
value: Date.UTC(2010, 0, 3),
color: 'green',
dashStyle: 'shortdash',
width: 2,
}],
plotLines:[{
value: Date.UTC(2010, 0, 6),
color: 'green',
dashStyle: 'shortdash',
width: 2,
}],
tickInterval: 24 * 3600 * 1000, // one day
type: 'datetime'
},
yAxis:{
plotLines:[{
value : 200,
color: 'green',
dashStyle: 'shortdash',
width: 2,
}] ,
plotBands: [{ // marking the weekend
color: 'rgba(68, 170, 213, 0.2)',
from: 150,
to: 250,
}],
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4 , 255.7],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 24 * 3600 * 1000
}]
});
});
I've also created a jsFiddle demo for this here