JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<div id="num_watch"></div>

JavaScript

var gmapData = [[{"label":"Date","type":"date"},"One",{"role":"annotation","type":"string"},"Two",{"role":"annotation","type":"string"},"Three",{"role":"annotation","type":"string"}],["Date(2012, 3, 26)",412,null,278,null,149,null],["Date(2012, 3, 27)",410,null,272,null,147,null],["Date(2012, 3, 30)",414,null,280,null,146,null],["Date(2012, 4, 1)",406,"$406",268,"$268",141,"$141"]];

	drawChart();

	function drawChart() {
		var data = window.data = google.visualization.arrayToDataTable(gmapData);

		// apply a tooltip formatting
		var formatter = new google.visualization.NumberFormat({pattern: '$#,###'});
		var cols = (gmapData[0].length-1) / 2;
		x = cols;
		// apply a tooltip formatting
		while ((--x) >= 0)
			formatter.format(data, x*2+1);

		var options = {
			title: 'Number Watch',
			legend: { position: 'bottom' },
			interpolateNulls: true,
			curveType: 'function',
			// Allow multiple
			// simultaneous selections.
			selectionMode: 'single',
			// Trigger tooltips
			// on selections.
			tooltip: {trigger: 'focus'},
			// Group selections
			// by x-value.
			focusTarget: 'category',
			annotations: {
				textStyle: {
					fontSize: 18
				}
			},
			vAxis: {format: '$#,###'},
			width: 400,
			height: 300
		};

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