Google charts plotBands

Question

I'm trying to achieve in the google charts the same feature that highcharts call "plotbands". Basically, I have a number/date chart, and I want in some intervals a different background color. Is this possible with google-charts?

What I'm trying to achieve:

I'm trying two diff approaches.

1 - Using area chart in a combo chart: The problem here is that I can't do straight lines. I guess it's because of the distance between points, nothing I can do here.

2 - using column chart in a combo chart (I think the solution should be around this option) The problem here is that I can't make the bars 100% width, there is always a big gap between them.

Answer 1

I just achieve the solution with the area chart (I hope this helps someone else).

My problem before was that I was passing in the object 0 and 100, and the graph was of course creating a transition.

export const mock = [
  ['Data', 'Avg Rating', 's'],
  [new Date('2020-07-07T16:48:44.000Z'), 50, 0],
  [new Date('2020-07-07T22:47:58.000Z'), 50, 0],
  [new Date('2020-07-08T22:35:44.000Z'), 50, 100],
  [new Date('2020-07-09T21:50:42.000Z'), 50, 100],
  [new Date('2020-07-10T21:50:47.000Z'), 50, 0],
  [new Date('2020-07-11T21:50:36.000Z'), 50, 0]
];

I just changed the 0 to null and the problem was solved.

export const mock = [
  ['Data', 'Avg Rating', 's'],
  [new Date('2020-07-07T16:48:44.000Z'), 50, null],
  [new Date('2020-07-07T22:47:58.000Z'), 50, null],
  [new Date('2020-07-08T22:35:44.000Z'), 50, 100],
  [new Date('2020-07-09T21:50:42.000Z'), 50, 100],
  [new Date('2020-07-10T21:50:47.000Z'), 50, null],
  [new Date('2020-07-11T21:50:36.000Z'), 50, null]
];