JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="barchart_values" style="height:600px;"></div>

JavaScript

google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

   var data = google.visualization.arrayToDataTable([
       ['Element', 'Density', { role: 'style' } ],
       ['Copper', 8.94, 'color: #FF9900'],
       ['Silver', 10.49,'color: #109618'],
       ['Gold', 19.30,'color: #3B3EAC'],
       ['Platinum', 21.45,'color: #0099C6']
  ]);   

  var view = new google.visualization.DataView(data);


  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: '95%'},
    legend: { position: 'none' },
  };
    options = google.charts.Bar.convertOptions(options);
    var chart = new google.charts.Bar(document.getElementById('barchart_values'));
    chart.draw(view, options);
}