Google Chart - Bar Chart change background (Background)

Question

I have the Code:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Ano', 'Total', 'Mestrado', 'Doutorado'],
      ['2014', 1000, 400, 200],
      ['2015', 1170, 460, 250],
      ['2016', 660, 120, 300],
      ['2017', 1030, 540, 350]
    ]);

    var options = {
      chart: {
        title: 'Mestrados e Doutorados do IG',
        subtitle: 'Total, Mestrados e Doutorados',
      },
      bars: 'horizontal'
    };

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

    chart.draw(data, options);
  }
</script>

And it has the White Background, I wanted to change to the color #EEE. I’ve tried backgroundColor: '#EEE' in options , but with this graph was not (I got with Pie).

Answer 1

According to this reply, you need to do the following:

Add:

chartArea: {
  backgroundColor: '#EEE'
}

the variable options, then change this piece of code:

chart.draw(data, options

for:

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

According to the documentation, the use of the method google.charts.Bar.convertOptions is needed for thematization among other Features that were present in the classic Google Charts, follows the Issue github also.

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Ano', 'Total', 'Mestrado', 'Doutorado'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var options = {
    chart: {
      title: 'Mestrados e Doutorados do IG',
      subtitle: 'Total, Mestrados e Doutorados'
    },
    bars: 'horizontal',
    chartArea: {
    	backgroundColor: '#fcfcfc'
    }
  };

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

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div onload="drawChart">
  <div id="barchart_material"></div>
</div>