Google Chart - Bar Chart change Background (Background)

Navigation
0

I have the Code: 

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="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's with the White Background, wanted to switch to #EEE color. I already tried backgroundColor: '#EEE' in the options, but with this graph it was not (I got it with Pie).

    
asked by anonymous 13.03.2016 / 15:26

1 answer

1

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

Add: 

chartArea: {
  backgroundColor: '#EEE'
}

the variable options , then change this piece of code: 

chart.draw(data, options

by: 

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

According to the documentation, the use of the google.charts.Bar.convertOptions method is required for theming among other features that were present in classic Google Charts, issue of GitHub as well. 

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><divonload="drawChart">
  <div id="barchart_material"></div>
</div>
    
13.03.2016 / 15:47
Query does not return results in PHP [closed] Error fetching list in MYSQL