is there any option to get highchart plotbands only for one xaxis?

Question

I am using highchart to get bar chart, i have used plotbands here so my requirement is i need to get the plotband only for the one row xaxis. here it is the snippet for example. https://jsfiddle.net/z6kug43w/20/

xAxis: {
    plotBands: [{
        from: 0.4,
      to: 0.6,
      color: '#fff',                     
      zIndex: 3
    },
    {
        from: 1.4,
      to: 1.6,
      color: '#fff',                     
      zIndex: 3
    },
    {
        from: 2.4,
      to: 2.6,
      color: '#fff',                     
      zIndex: 3
    },
    {
        from: 3.4,
      to: 3.6,
      color: '#fff',                     
      zIndex: 3
    }],
    categories: ["abc (1%)", "abcd (1%)", "abce (1%)", "abcf (1%)", "abcg (1%)", "abch (1%)"],
    crosshair: true
},

yAxis: { min: 0, plotBands: [{ from: 0, to: 100, thickness: '2%', color: '#D5D5D6' }], title: { text: 'Rainfall (mm)' } },

Hi @FakerMakesActualCorrect, Thanks for helping me here, i have shared that image in description. that i want to plot only top level of the graph. — shirisha
like in the image i want the plot band for top level for now it is getting for all the xaxis rows as in the example jsfiddle.net/z6kug43w/20. Just uploaded once again for you i thought image is not visible, please ignore the second one. — shirisha

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-09-14T09:20:07

Please take a look at this custom plugin which allows you to defining the low and high values for the plotBands.

Demo: https://jsfiddle.net/BlackLabel/n3okxjug/

  xAxis: {
    categories: ["abc (1%)", "abcd (1%)", "abce (1%)", "abcf (1%)", "abcg (1%)", "abch (1%)"],
    crosshair: true,
    plotBands: [{
      from: 0.5,
      to: 1.5,
      color: 'red',
      low: '60%',
      high: '100%'
    }]
  },

Is this a result which you wanted to achieve?

is there any option to get highchart plotbands only for one xaxis?

1 Answers