CODEWITHSUNDEEP
javascriptcssgoogle-visualization
Chuck Le Butt
Chuck Le Butt

Reputation: 48818

Changing background colour of a Google Charts (Google Visualization) Graph

I'm trying to simply change the background color of a line graph I've created using Google Charts. I feel like I'm following Google's Official Documentation, but none of the changes I'm specifying are being applied.

I'm passing the options like so:

  var options = {
      backgroundColor: 'black',
      chartArea: {
                backgroundColor: 'black'
            },
      crosshair: {
          orientation: 'vertical'
      },
      animation: {
          startup: true,
          duration: 5000
      },
    width: 500,
    height: 300     
  };

But they are nearly all being ignored. See this JSFiddle for an example: http://jsfiddle.net/zgznoe3v/

I must be doing something really obvious wrong, but for the life of me I cannot figure out what.

Upvotes: 0

Views: 3532

Answers (1)

trekforever
trekforever

Reputation: 3922

It looks like you're using Google's Material Line Charts instead of the Classic Line Charts. So you have to convert the options object using

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

See http://jsfiddle.net/zgznoe3v/6/

If you don't want to do that, you can stick to the classic charts. So instead of using

  google.load('visualization', '1.1', {packages: ['line']});
  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(data, options);

try 

  google.load('visualization', '1.1', {packages: ['corechart']});
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);

See http://jsfiddle.net/zgznoe3v/5/

Upvotes: 4

Related Questions