JSFiddle - React, Tailwind, and code Playground

by Jereman

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {
	var data = loadData();
  
  var options = {		//Render options for the chart
  	title: 'Average Scores',
    titleTextStyle: {
      fontName: 'arial',	//Fonts to be changed to Helvetica when implemented
      fontSize: 18,
      italic: false,
      bold: true
    },
    legend: 'none',
    bar: {
    	groupWidth: 'default'
    },
    hAxis: {
    	title: 'Criterion',
      titleTextStyle: {
      	fontName: 'arial',
        fontSize: 14,
      	italic: false,
        bold: false
      },
      viewWindow: {
      	min: 0,
     		max: 10
      }
    },
    vAxis: {
    	title: 'Average Score',
      titleTextStyle: {
      	fontName: 'arial',
        fontSize: 14,
      	italic: false,
        bold: false
      },
      viewWindow: {
      	min: 0,
        max: 100
      }
    }
  };
  
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);

}

function loadData() {
	var data = new google.visualization.DataTable();
  data.addColumn('number', 'Criterion');
	data.addColumn('number', 'Average Score');
  data.addColumn({type: 'string', role: 'style'});	//column for specifying the bar color
  
  
  //Random Test Data
  var i;
  for(i = 1; i < 10; i++) {
  	data.addRow([i, Math.floor(Math.random() * 101), '#a90201']);
  }
  
  return data;
	
}