JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="num_watch"></div>
JavaScript
var gmapData = [["Date","One","Two","Three"],["Date(2012, 3, 2)",412.0,277.0,145.0],["Date(2012, 3, 3)",413.0,279.0,154.0],["Date(2012, 3, 4)",411.0,283.0,152.0],["Date(2012, 3, 5)",417.0,278.0,149.0],["Date(2012, 3, 6)",417.0,274.0,142.0],["Date(2012, 3, 7)",null,null,null],["Date(2012, 3, 8)",null,null,null]];
drawChart();
function drawChart() {
gmapData[0][0] = {type: 'date', label: 'Date'};
var data = window.data = google.visualization.arrayToDataTable(gmapData);
// apply a tooltip formatting
var formatter = new google.visualization.NumberFormat({pattern: '$#,###'});
var x = gmapData[0].length;
while ((--x) > 0)
formatter.format(data, x); // Apply formatter to each column
var options = {
title: 'Number Watch',
legend: { position: 'bottom' },
interpolateNulls: true,
curveType: 'function',
// Allow multiple
// simultaneous selections.
selectionMode: 'single',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
focusTarget: 'category',
vAxis: {format: '$#,###'},
width: 400,
height: 300
};
var chart = window.chart = new google.visualization.LineChart(document.getElementById('num_watch'));
chart.draw(data, options);
chart.setSelection([{row:4, column:null}]);
}