Google Chart - Bar Chart change background)

Question

Google Chart - Bar Chart change background)

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 is with the white background, wanted to change to the color # EEE. I've tried backgroundColor: '#EEE' in options, but with this chart it wasn't (I got it with Pie).

0

html javascript google-charts

Author: wellington.silverio, 2016-03-13

Source

1 answers

score 1 · Accepted Answer

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

Add:

chartArea: {
  backgroundColor: '#EEE'
}

The variable options, then swap 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 method google.charts.Bar.convertOptions is necessary for theming among other features that were present in the classic Google Charts, follows the 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>
<div onload="drawChart">
  <div id="barchart_material"></div>
</div>