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: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
}
},
series: [{
name: '2013',
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(2013, 0, 1), 1],
[Date.UTC(2013, 1, 1), 2 ],
[Date.UTC(2013, 3, 1), 4],
[Date.UTC(2013, 4, 1), 5 ],
[Date.UTC(2013, 5, 1), 6 ],
[Date.UTC(2013, 6, 1), 7],
[Date.UTC(2013, 7, 1), 8],
[Date.UTC(2013, 8, 1),9],
[Date.UTC(2013, 9, 1), 10],
[Date.UTC(2013, 10, 1), 11],
[Date.UTC(2013, 11, 1), 12]
]
}]
});
});