JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="line"></div>

JavaScript

google.charts.load('current', {
  'packages': ['line']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
    [1, 37.8, 80.8, 41.8],
    [2, 30.9, 69.5, 32.4],
    [3, 25.4, 57, 25.7],
    [4, 11.7, 18.8, 10.5],
    [5, 11.9, 17.6, 10.4],
    [6, 8.8, 13.6, 7.7],
    [7, 7.6, 12.3, 9.6],
    [8, 12.3, 29.2, 10.6],
    [9, 16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11, 5.3, 7.9, 4.7],
    [12, 6.6, 8.4, 5.2],
    [13, 4.8, 6.3, 3.6],
    [14, 4.2, 6.2, 3.4]
  ]);

  var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900,
    height: 500,
    axes: {
      x: {
        0: {
          side: 'bottom'
        }
      }
    },
    explorer: {
      actions: ['dragToPan', 'rightClickToReset'],
      axis: 'horizontal',
      keepInBounds: true
    },
  };

  var chart = new google.charts.Line(document.getElementById('line'));

  chart.draw(data, options);
}