JSFiddle - React, Tailwind, and code Playground

by Otácio Barbosa

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', 'line']
});
google.charts.setOnLoadCallback(drawCurveTypes);

function drawCurveTypes() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Maria');
  data.addColumn('number', 'Marcos');

  data.addRows([
    [0, 0, 0],
    [1, 0, 0],
    [2, 2, 6],
    [3, 0, 2],
    [4, 0, 8],
    [5, 1, 1],
    [6, 0, 0],
    [7, 0, 0],
    [8, 0, 10],
    [9, 0, 2],
    [10, 1, 1]
  ]);

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    },
    series: {
      1: {
        curveType: 'function'
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}