Changing Google Stacked Bar Chart colors for Material Bar Chart - Javascript Google Chart

Javascript examples for Google Chart:Bar Chart

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

Description

Changing Google Stacked Bar Chart colors for Material Bar Chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
      <style id="compiled-css" type="text/css">

figure {//from  w w  w.  j ava2 s  .c  o  m
   border: 1px solid silver;
   padding: 10px;
   margin: 0px;
}


      </style> 
   </head> 
   <body> 
      <main> 
         <h1>Customer Health</h1> 
         <figure id="health-chart"></figure> 
      </main> 
      <script src="https://www.gstatic.com/charts/loader.js"></script> 
      <script type="text/javascript">
var data = [
   ['Sector','High', 'Medium', 'Low' ],
   ['Agriculture',   18,  9, 29],
   ['Education',      2, 14, 10],
   ['Healthcare',     4,  6, 41],
   ['Manufacturing', 36, 10,  3]
   ];
var colors = [
   { color: 'indianred' },  //high
   { color: 'khaki' },      //medium
   { color: 'seagreen' },   //low
   ];
function drawChart() {
   var options = {
      chart: { title: 'Risk by sector' },
      legend: { position: 'top' },  //not yet supported
      bars: 'horizontal',
      stacked: true,
      series: colors
      };
   var chartData = google.visualization.arrayToDataTable(data);
   var elem = $('figure#health-chart')[0];
   var chart = new google.charts.Bar(elem);
   chart.draw(chartData, options);
   }
google.charts.load('current', { packages: ['bar'] });
google.charts.setOnLoadCallback(drawChart);

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

Related Tutorials