Highcharts - Highlight / Shade date range

Question

I need to add a new series to this chart which will allow me to highlight / shade a particular range of dates. It needs to be 100% height of the chart.

I was looking at using another area series, but I couldn't get it working as I wanted it given I have two existing area series on this chart.

I thought another series which had a 1 or 0 for the particular point to indicate if it should be highlighted or not?

{name: 'mydates',
  color:'red',
  fillOpacity: 0.3,
  data: [0, 0, 0,1,1,1,1, 1, 1,1,0,0],
  type:'area',
  stacking: 'percent'
},

http://jsfiddle.net/L3ynM/

The problem with my sample:

• The 'mydates' series doesn't take 100% height of the chart
• If the 'mydates' series begins midchart, it starts with an angle. I'd like it to go straight up

Answer 1

Unless you really need the legend entry, I would recommend using plotBands instead

http://api.highcharts.com/highcharts#xAxis.plotBands

You can also do it like this, if you do really need the legend:

http://jsfiddle.net/jlbriggs/JVNjs/305/

data:[[1.5,0],[1.5,80],[2.25,80],[2.25,0]]

It relies in part on setting a min and max, and using those min and max values as your y data points.