JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart" style="width: 900px; height: 500px;"></div>

JavaScript

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
    'packages': ['corechart']
});
      google.setOnLoadCallback(drawChart);

function drawChart(){
	var data = google.visualization.arrayToDataTable( 
[["Y", "Your X & Y", "Product 1", "Product 2", "Product 3"],
        [419, 589, null, null, null],
        [386, null, 504, null, null],
        [386, null, 526, null, null],
        [387, null, 543, null, null],
        [395, null, 564, null, null],
        [402, null, 591, null, null],
        [408, null, 612, null, null],
        [378, null, null, 501, null],
        [398, null, null, null, 600],
        [460, null, null, null, 500]] );
	//data.setColumnProperty( TooltipCol, 'role', 'tooltip');
	var options = {
		'width': 680,
		'height': 500,
		fontSize: 10,
		chartArea: {
			width: '80%',
			height: 400,
			left:80,
			right:60,
			  
		},
		backgroundColor: 'transparent',
		areaOpacity: 1,
		lineWidth: 2,
		pointSize: 6,
		axisTitlesPosition: 'out',
		sliceVisibilityThreshold: 0,
		legend: {
			position: 'top',
			textStyle: {
				fontSize: '13'
			},
		},
		hAxis: {
			textStyle: {
				color: '#555'
			},
			gridlines: {
				color: '#EEE',
				count: 20
			},
			baselineColor: '#000',
			showTextEvery:2,
			viewWindowMode: 'pretty'
		
		},
		vAxis: {
			textStyle: {
				color: '#555'
			},
			gridlines: {
				color: '#eee',
				count: 20
			},
			viewWindowMode: 'pretty'
		},
		series: {
			0: {
				color: 'green',
				pointSize: 12,
			},
		}
	};
		
	var chart = new google.visualization.LineChart(document.getElementById('chart'));
	chart.draw(data, options);
}