JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 68vh; margin: 0 auto"></div>

JavaScript

//This var is actually set by an AJAX call to the server, but let's pretend
dataFromServer = [{"name":"Dissolved Oxygen","data":[[1402079444,9]]},{"name":"Temperature (Water)","data":[[1401291099,9],[1401862547,12],[1402079444,13],[1406124637,18],[1406210126,15],[1407335724,17]]},{"name":"Temperature (Air)","data":[[1401291099,7],[1401862547,13],[1402079444,18],[1406124637,20],[1406210126,15],[1407335724,19]]},{"name":"Salinity","data":[[1401291099,32],[1401862547,33],[1402079444,31],[1406124637,31],[1406210126,33],[1407335724,34]]},{"name":"Turbidity","data":[[1402079444,0]]},{"name":"Transparency","data":[[1402079444,2]]},{"name":"Tide Stage","data":[[1401862547,3],[1402079444,5],[1406210126,6]]},{"name":"Enterococcus Level","data":[[1401291099,10],[1406124637,122],[1406210126,10],[1407335724,5]]},{"name":"Feces Present","data":[[1406210126,1]]}];


		$(function () {
    $('#container').highcharts({
        chart: {
         //   type: 'spline',
            zoomType: 'x',
        },
        title: {
            text: ''
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        series: dataFromServer
    });
});