JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
JavaScript
var chart;
$(document).ready(function() {
function newRandomData() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -99; i <= 0; i++) {
data.push({
x: time + i * 1000 * 60 * 24,
y: Math.random()
});
}
return data;
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'x'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'datetime',
title: {
text: 'dates'
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter:function() {return this.y.toFixed(1)}
}
}
},
series: [{
name: 'John',
data: newRandomData(),
dataGrouping: {
enabled: true,
smoothing: false
}}]
});
});