3

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/

1 Answer 1

10

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

3
  • Thank you Henrik. Actually I tried the first option you proposed and nothing happened. Clearly I had to modify the chart.draw() func for the changes to take effect.
    – user3772
    Jun 23, 2015 at 14:35
  • This was the part I was missing: chart.draw(data, google.charts.Bar.convertOptions(options)); ... thanks.
    – Patrick
    Jan 31, 2016 at 3:29
  • I saw a ton of answers for similiar problems but none included chart.draw(data, google.charts.Bar.convertOptions(options)); that did the trick. Thank you
    – achasinh
    Sep 27, 2016 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.