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: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Photos rainbowed this weekend'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 3 * 24 * 3600000, // 3 days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Rainbows'
}
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Rainbows',
pointInterval: 600 * 1000,
pointStart: Date.UTC(2014, 1, 8, 21, 30),
data: [0, 0, 0, 1, 1, 1, 6, 10, 11, 11, 20, 27, 31, 173, 340, 421, 512, 604, 658, 718, 754, 784, 812, 839, 847, 868, 869, 875, 889, 897, 906, 909, 911, 918, 918, 921, 928, 928, 928, 928, 931, 933, 933, 936,...