CODEWITHSUNDEEP
javascriptplotchartshighcharts
Leon Gaban
Leon Gaban

Reputation: 39034

How to get PlotBands data to show up on HighChart chart?

http://jsfiddle.net/leongaban/627yamt2/

Docs: http://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines

Trying to get plotbands to show up, however no luck so far, what am I missing?

This is the only code I added to the forked jsfiddle above:

xAxis: {
  dateTimeLabelFormats: {hour: '%I %p', minute: '%I:%M %p'},
  plotBands: [{
       color: 'red',
       from: 1,
       to: 2,
       value: 3, // Value of where the line will appear
       width: 2, // Width of the line   
       label: { 
            text: 'I am a label', // Content of the label. 
            align: 'left' // Positioning of the label. 
       }
  }]
},

Trying to get something that looks like this:

enter image description here

Upvotes: 0

Views: 2205

Answers (1)

Grzegorz Blachliński
Grzegorz Blachliński

Reputation: 5222

I think that you need to use parameters connected with plotBands. Right now some of your parameters are connected with plotLines as well and I think this is causing your issue. Here you can find parameters for plotBands: http://api.highcharts.com/highcharts#xAxis.plotBands

    plotBands: [{
      color: 'red',
      from: 1265888000000,
      to: 1345888000000,
      label: {
        text: 'I am a label', // Content of the label. 
        align: 'left' // Positioning of the label. 
      }
    }]

And here you can find live example how your chart can look with plotBands: http://jsfiddle.net/627yamt2/1/

You can also add plotBands using xAxis.addPlotBand method: http://api.highcharts.com/highcharts#Axis.addPlotBand

Best regards.

Upvotes: 2

Related Questions