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!
