google charts change background color - charts

Question

I saw some previous questions/answers here on StackOverflow
but none of the code provided in those answers seemed to work
with my chart:
Here is my code:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Sales', 'Expenses'],
['January', 200, 150],
['February', 1170, 460],
['March', 660, 1120],
['April', 1030, 540],
['May', 1030, 540],
['June', 1030, 540]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August',
backgroundColor: '#fcfcfc',
}
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
The html div code:
<div id="columnchart_material" style="width: 650px; height: 500px;"></div>
The thing is I want to change the background from white to light gray
and I can't seem to make it work by declaring backgroundColor: "#fcfcfc'
inside options{}
Is there any other way to declare a background color on that chart
I'm thinking maybe the type of chart I'm using can't change it's
background color.
I also tried to specify the backgroundColor variable as a function (followed by curly brackets backgroundColor{ color: '#fcfcfc' }
but that didn't work on my chart either.
Any help would be higly appreciated.
Thank you
jsFiddle : http://jsfiddle.net/mtypsnqy/

Answer 1

First, you've placed your backgroundColor: '#fcfcfc', at the wrong place. You have defined it inside of chart:{}while you should do it either outside any object or inside of chartArea like:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
backgroundColor: '#fcfcfc'
};
which will cause your whole div containing the chart to be dark grey or like this:
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: May-August'
},
chartArea:{
backgroundColor: '#fcfcfc'
}
};
which will cause only the area contained within your two axes to be colored red.
And finally you have to change your
chart.draw(data, options);
to
chart.draw(data, google.charts.Bar.convertOptions(options));
as specified on the Bar Charts API page.
I made you a fiddle to play around in and see the difference: Link