JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container_chart_turnover" style="height: 300px"></div>

JavaScript

data = {"title":"Turnover for 05-31-2015 to 06-29-2015","categories":["01\/06","02\/06","03\/06","04\/06","05\/06","06\/06","07\/06","08\/06","09\/06","10\/06","11\/06","12\/06","13\/06","14\/06","15\/06","16\/06","17\/06","18\/06","19\/06","20\/06","21\/06","22\/06","23\/06","24\/06","25\/06","26\/06","27\/06","28\/06","31\/05"],"data":[[0],[0],[0],[0.02],[4.54],[4.64],[2.32],[3.83],[31.66],[16.69],[0],[6.5],[0],[0],[0],[36.88],[11.08],[0],[19.96],[0],[50.98],[15.75],[7.61],[0],[1.41],[0],[3.32],[0],[0]]}
		$('#container_chart_turnover').highcharts({
			chart: {
				type: 'spline'
			},
			title: {
				text: 'Snow depth at Vikjafjellet, Norway'
			},
			subtitle: {
				text: 'Irregular time data in Highcharts JS'
			},
			xAxis: {
				title: {
					text: 'Date'
				},
				categories: data.categories
			},
			
			yAxis: {
				title: {
					text: 'Amount (USD)'
				},
				min: 0
			},
			tooltip: {
				headerFormat: '<b>{series.name}</b><br>',
				pointFormat: '{point.x}: $ {point.y:.2f}'
			},

			plotOptions: {
				spline: {
					marker: {
						enabled: true
					}
				}
			},

			series: [{
				name: data.title,
				data: data.data
			}]
		});