Chart background highlight in HighChart

问题:

In this question it's explained how to set the background to have two colours (zebra like). My need is to highlight in the chart temporal changes via setting accordingly the background colour, like this:

the two blue area may identify periods where something was happening and the white one when it wasn't. On top of this I'll then add lines and other charts.

Can this be done via passing Highchart with start and end date of periods to be highlighted? (an area chart workaround maybe?)

回答1:

What you most likely need is plotBands

xAxis.plotBands

A colored band stretching across the plot area marking an interval on the axis.

In a gauge, a plot band on the Y axis (value axis) will stretch along the perimiter of the gauge.

plotBands can be added on either of the axes, in your case you seem to want it on the xAxis, following is how one could do it

xAxis: {
    plotBands: [{ 
        color: '#FCFFC5',
        from: Date.UTC(2010, 0, 2),
        to: Date.UTC(2010, 0, 4)
    }]     
}

Plotbands @ jsFiddle