JSFiddle - React, Tailwind, and code Playground

by suven_up

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Classic</button>
<br><br>
<div id="chart_div"></div>

JavaScript

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

      function drawChart() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Month');
        data.addColumn('number', "Average Temperature");
        data.addColumn('number', "Average Hours of Daylight");

        data.addRows([
          [new Date(2014, 0), -.5, 5.7],
          [new Date(2014, 1), .4, 8.7],
          [new Date(2014, 2), .5, 12],
          [new Date(2014, 3), 2.9, 15.3],
          [new Date(2014, 4), 6.3, 18.6],
          [new Date(2014, 5), 9, 20.9],
          [new Date(2014, 6), 10.6, 19.8],
          [new Date(2014, 7), 10.3, 16.6],
          [new Date(2014, 8), 7.4, 13.3],
          [new Date(2014, 9), 4.4, 9.9],
          [new Date(2014, 10), 1.1, 6.6],
          [new Date(2014, 11), -.2, 4.5]
        ]);

        var materialOptions = {
          chart: {
            title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
          },
          width: 900,
          height: 500,
           explorer: {
            axis: 'horizontal',
            keepInBounds: true,
            maxZoomIn: 4.0
          },
          series: {
            // Gives each series an axis name that matches the Y-axis below.
            0: {
              axis: 'Temps'
            },
            1: {
              axis: 'Daylight'
            }
          },
          axes: {
            // Adds labels to each axis; they don't have to match the axis names.
            y: {
              Temps: {
                label: 'Temps (Celsius)'
              },
              Daylight: {
                label: 'Daylight'
              }
            }
          }
        };

        var classicOptions = {
          title: 'Average Temperatures and Daylight in...