tom tom - 10 days ago 4
Javascript Question

Google Charts Bar Background Color Not Working

All I want to do is change the background color to transparent, yet I can't even change the color at all no matter the combination of options I see anywhere in the (fantastic!...) documentation.



<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
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 = {

title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},

bars: 'horizontal',
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);
};
</script>

</head>

<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>

</html>




Answer

In options of course for Classic GViz:

backgroundColor: {fill:'transparent'},

This will not work if you are using Materials BETA

But the following will work for Classic and Materials

  1. Make a <style> block at the closing tag of </head>
  2. Add this ruleset:
 rect {
       fill:transparent;
   }

OP is using Materials and it is documented at the Materials Bar Chart section the following:

The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.

Also, the way options are declared is not finalized, so you must convert your options by replacing this line:

chart.draw(data, options);

...with this:

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


In Snippet 2 one can plainly see that we can indeed make GViz chart background transparent. The core graphics are SVG, so if we want to have more control of our charts graphically, we would need to know a little SVG.

SNIPPET 1

   <!DOCTYPE html>
    <html>

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
      <title>Basic GVis ChartWrapper Setup</title>
      <style>
        body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script type="text/javascript">
        google.charts.load('current', {
          'packages': ['corechart']
        });
        google.charts.setOnLoadCallback(drawChart);

        var options = {
          backgroundColor: {fill:'transparent'},
          title: 'Google Visualization ChartWrapper Setup',
          titleTextStyle: {
            color: 'blue',
            fontName: 'Arial',
            fontSize: 22
          },
          hAxis: {
            textStyle: {
              color: '#993300'
            },
            title: 'Subjects',
            titleTextStyle: {
              color: '#993300',
              fontName: 'Verdana',
              fontSize: 22
            }
          },
          vAxis: {
            maxValue: 1000,
            textStyle: {
              fontName: 'Verdana',
              color: '#993300'
            },
            title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
            titleTextStyle: {
              color: 'blue',
              fontName: 'Arial',
              fontSize: 16
            }

          }
        };

        function drawChart() {
          chart = new google.visualization.ChartWrapper();
          //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          //Place your URL within setDataSourceUrl(...HERE...)

          chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');

          //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
          chart.setChartType('LineChart');
          chart.setContainerId('chart');
          chart.setOptions(options);
          chart.draw();
        }
      </script>
    </head>

    <body>
      <header>
        <details>
          <summary>
            <p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
            <p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
            </p>
          </summary>
        </details>
      </header>
      <section id="chart"></section>

    </body>

    </html>

SNIPPET 2

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>G04B32</title>


  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
      'packages': ['bar']
    });
    google.charts.setOnLoadCallback(drawStuff);

    function drawStuff() {
      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: 'transparent'
        },
        title: 'Chess opening moves',
        width: 900,
        legend: {
          position: 'none'
        },
        chart: {
          title: 'Chess opening moves',
          subtitle: 'popularity by percentage'
        },
        backgroundColor: {
          fill: 'transparent'
        },
        bars: 'horizontal',
        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);
    };
  </script>
  <style>
    body {
      background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
      background-size: cover;
    }
    rect {
      fill: transparent;
    }
  </style>
</head>

<body>
  <div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>

</html>