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,

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:

Google Chart with white background

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

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!

Google Chart with correct background

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

Josh Sherman - The Man, The Myth, The Avatar

About Josh

Husband. Father. Pug dad. Musician. Founder of Holiday API, Head of Engineering and Emoji Specialist at Mailshake, and author of the best damn Lorem Ipsum Library for PHP.

If you found this article helpful, please consider buying me a coffee.