CODEWITHSUNDEEP
javascriptgoogle-visualization
George
George

Reputation: 643

Google Charts backgroundColor not working with example code

I use code from example page to create horizontal bars chart:

Option backgroundColor work for other chart types, like this and that.

Is there are way to change background color for Bars charts?

google.load('visualization', '1.1', {packages:['bar']});

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);
    
    var options = {
          backgroundColor: { fill: '#000' },//this is not working
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" },
        };
    
    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    chart.draw(data, options);

}

google.setOnLoadCallback(drawVisualization);
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="top_x_div"></div>

chart

Upvotes: 3

Views: 2000

Answers (1)

rtome
rtome

Reputation: 1993

You're using a Material Bar chart (See the relevant documentation here.)
See the comment at the end of the documentation paragraph :

The Material Charts are in beta. The appearance and interactivity are largely final, but the way options are declared is not. If you are converting a Classic Bar Chart to a Material Bar Chart, you'll want to replace this line: 

chart.draw(data, options);

...with this: 

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

So if you want your standard options taken into account you need to wrap them with google.charts.Bar.convertOptions().

Have a try, it works great. See a jsfiddle of it here.

Upvotes: 9

Related Questions