Customizing Google Material bar Chart - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Customizing Google Material bar Chart

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"> 
      <style id="compiled-css" type="text/css">

#bar-chart svg g[clip-path] g:not(:first-child) rect:hover {
   fill: blue;//w  ww  . jav  a  2 s .c o  m
   stroke: black;
   stroke-width: 1;
}


      </style> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
      <div id="bar-chart"></div> 
      <script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(barChart);
function barChart() {
   var data = new google.visualization.arrayToDataTable([
        ['Opening Move', 'Percentage', { role: 'style' }],
        ["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 = {
     chartArea: {
      width: '50%',
      left: 200, // adjust to display names
    },
    width: 520,
    height: 320,
    legend: { position: 'none' },
    hAxis: {
      title: 'Percentage',
      format: 'short',
      ticks: [0,10,20,30,40,50],
      max: 50
    },
    vAxis: {
      title: 'Opening Move'
    },
    bar: { groupWidth: "80%" },
    colors:['#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd','#c6dbfd']
  };
   var chart = new google.visualization.BarChart(document.getElementById('bar-chart'));
   chart.draw(data, options);
}

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

Related Tutorials