JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?dummy=.js"></script>
<div id="chart_dive"></div>

JavaScript

google.load('visualization', '1.1', {
    'packages': ['corechart'],
    'language': 'zh_CN'
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sold Pencils');
    data.addColumn('number', 'Sold Pens');
    data.addRows([
        [new Date(2008, 1, 1), 30000, 40645],
        [new Date(2008, 1, 2), 14045, 20374],
        [new Date(2008, 1, 3), 55022, 50766],
        [new Date(2008, 1, 4), 75284, 14334],
        [new Date(2008, 1, 5), 41476, 66467],
        [new Date(2008, 1, 6), 33322, 39463]
    ]);
    var minVal = Infinity;
    var maxVal = -Infinity;
    for (var i = 1; i <= 2; i++) {
        var range = data.getColumnRange(i);
        minVal = range.min < minVal ? range.min : minVal;
        maxVal = range.max > maxVal ? range.max : maxVal;
    }
    var scale = d3.scale.linear().domain([minVal, maxVal]);
    var numTicks = 5;
    // see: https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format
    var format = scale.tickFormat(numTicks, 's');
    // Remap to our tick format: v for real value, f for formatted value.
    function remap(tick) {
        return {
            v: tick,
            f: format(tick)
        };
    }

    var diveOptions = {
        colors: ['royalblue', 'tomato'],
        vAxis: {
            ticks: scale.nice(1).ticks(numTicks).map(remap),
        },
        interactivityModel: 'dive',
        legend: {
            position: 'labeled'
        },
    };
    var chart2 = new google.visualization.LineChart(document.getElementById('chart_dive'));
    chart2.draw(data, diveOptions);
};