How to set the background color of a Google Chart

As luck would have it a Google Chart I had created some time last year, which was looking great for a while, recently decided that the background color of the chart itself was going to switch from the color I had set to the default color, white.

This was quite frustrating since it was working correctly at one point, I’m absolutely freaking sure of it.

The offending Google Chart now looked like this:

Not a big deal, but I did prefer the aesthetic of the chart wholly matching the background of the container it was in.

Upon checking the source, I was definitely setting the background color:

const options = {
  chart: {},
  width: '100%',
  height: 300,
  backgroundColor: '#f1f7f9',
  hAxis: { title: '' },
};

I messed around with that value a bit, and it at least somewhat “working” as it was setting the background behind the key off to the right to be the specified color.

The “chart area” as I learned it was called, just didn’t want to take the color I had set.

I suspect it was a change to the Google Chart API, but it seems that the chart area now requires an additional value to set the background color explicitly:

const options = {
  chart: {},
  chartArea: { backgroundColor: '#f1f7f9' },
  width: '100%',
  height: 300,
  backgroundColor: '#f1f7f9',
  hAxis: { title: '' },
};

Lo and behold, the Google Chart now blends in again!

The chart in question is from my service Holiday API, where we make it extremely easy to add accurate holiday data to your website or application. Check it out if you’re ever in global holiday data in over 100 different languages!