JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

var rawdata = [
    [13.000, 72, true, 72, true, 32.9, true, -0.2, true, 37, true],
    [13.167, 71, true, 72, true, 33, true, -0.2, true, 37, true],
    [14.167, 71, false, 72, false, 33.1, false, -0.1, false, 37, false],
    [14.333, 72, false, 70, false, 33, false, -0.2, false, 38, false],
    [15, 74, true, 72, true, 31, true, -0.3, true, 30, true],
    [16, 75, true, 73, true, 30, true, 0.1, true, 29, true]
];

function drawStuff() {
    var data = google.visualization.arrayToDataTable(rawdata, true);

	 data.setColumnProperty(2, 'role', 'certainty');
	 data.setColumnProperty(4, 'role', 'certainty');
	 data.setColumnProperty(6, 'role', 'certainty');
	 data.setColumnProperty(8, 'role', 'certainty');
	 data.setColumnProperty(10,'role', 'certainty');
		
		var start = -20;
		var vTicks = [];
		while (start <= 100) {
			vTicks.push(start);
			start+=10;
		}

		var options = {
			fontSize: 8,
			legend: {position: 'right'},
			colors: ['green', 'blue', 'red', 'green', 'yellow', 'gray'],
			series: {
				0: { lineDashStyle: [2, 2] }
			},
			hAxis: {
				title: 'Time',
				gridlines: {
					count: 25,
				},
				minorGridlines: {
					count: 3
				},

			}, 
			vAxis: {
				title: 'Temperature',
				gridlines: {
					count: 12,
				},
				minorGridlines: {
				count: 4
				},
				ticks: vTicks
			} 
		};
		var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
		chart.draw(data,options);
};