I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:

zoomType: 'x', 
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)

This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.

This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:

.plotBands

xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?

I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:

zoomType: 'x', 
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)

This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.

This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:

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

xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?

• javascript
• jquery
• highcharts

1 Answer 1

Yes, this can be done with xAxis[i].addPlotBand().