Google Chart Background Color settings - Javascript Google Chart

Javascript examples for Google Chart:Chart Configuration

  1. HOME
  2. Javascript
  3. Google Chart
  4. Chart Configuration

Description

Google Chart Background Color settings

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>An Example of a Google Bar Chart</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="classic_div"></div> 
      <div id="material_div"></div> 
      <script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {//from  w  w  w .j a v  a2 s. c  o m
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,    400],
    ['2005',  1170,    460],
    ['2006',   660,   1120],
    ['2007',  1030,    540],
    ['2009',  1120,    580],
    ['2010',  1200,    500],
    ['2011',  1250,    490],
  ]);
  var options = {
    width: 500,
    height: 300,
    chart: {
      title: 'Company Performance',
      subtitle: 'Sales, Expenses, and Profit: 2014-2017'
    },
    chartArea: {
      backgroundColor: {
        fill: '#FF0000',
        fillOpacity: 0.1
      },
    },
    backgroundColor: {
      fill: '#FF0000',
      fillOpacity: 0.8
    },
  }
  var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
  classicChart.draw(data, options);
  var meterialChart = new google.charts.Bar(document.getElementById('material_div'));
  meterialChart.draw(data, google.charts.Bar.convertOptions(options));
}

      </script>  
   </body>
</html>

Related Tutorials