Google Bar Chart Not Changing Background Color

1
votes

I'm using the google Material Charts static api library and I cannot figure out why the background color I"m entering is not reflecting the change when the page loads.

Here are the options I have:

var options = {
          backgroundColor: '#E8E4D8',
          chart: {
              title: 'Coaches by Service',
              subtitle: 'Coaches by Services: From 2016-09-10 until Today'
          }
      };

And here is how I'm instantiating the chart:

 var chart = new google.charts.Bar(document.getElementById('chart_div'));

 chart.draw(data, google.charts.Bar.convertOptions(options));

The chart title and subtitle are correctly displaying, any advice as to why the background color remains as the default white would be greatly appreciated.

2
javascriptgoogle-visualization

2 Answers

0
votes

Is there more you can share? Appears to work here...

Maybe, check the version you're loading.
Here, I use frozen version '44', instead of 'current'.
There have been recent issues. 

google.charts.load('44', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    backgroundColor: '#E8E4D8',
    chart: {
        title: 'Coaches by Service',
        subtitle: 'Coaches by Services: From 2016-09-10 until Today'
    }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));

  chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
0
votes

For me it was missing google.charts.Bar.convertOptions

Originally it was like this.

chart.draw(data, options);

This works:

chart.draw(data, google.charts.Bar.convertOptions(options));