CODEWITHSUNDEEP
javascriptjqueryhighcharts
Michele
Michele

Reputation: 8753

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:

enter image description here

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?)

Upvotes: 0

Views: 1113

Answers (1)

Jugal Thakkar
Jugal Thakkar

Reputation: 13472

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

Upvotes: 2

Related Questions