Change the inner color of Google Chart

Question

I have a Google Bar Chart using the Material design. I am trying to change its default white background color to match my page, but the color changes only the outer margin of the chart. The inner area where the chart data is stays white. I have used plain backgroundColor and the fill:... identifiers in my options and both give me the same result. Here's my code:

 var barchart_options = {
            width: 600,
            height:350,
            backgroundColor : '#CFC3F8',

            .......

When trying it with the fill identifier, I did this:

backgroundColor : {fill:'#CFC3F8'},

Here's a screenshot:

WhiteHat WhiteHat · Accepted Answer · 2016-09-23T16:32:23

there is also an option for chartArea.backgroundColor

var options = {
  backgroundColor: '#CFC3F8',
  chartArea: {
    backgroundColor: '#CFC3F8'
  }      
};

and only the color is needed

see following working snippet...

google.charts.load('current', {
  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: 'magenta',
    chartArea: {
      backgroundColor: 'cyan'
    }
  };

  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"></div>

Change the inner color of Google Chart

1 Answers