JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" style="height: 600px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
JavaScript
$(document).ready(function() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
height: 590,
marginTop: 150,
marginLeft: 55
},
navigator: {
enabled: true,
maskFill: 'rgba(235, 235, 235, 0.75)',
xAxis: {
opposite: true,
gridLineWidth: 1,
gridLineColor: '#EEEEEE',
tickWidth: 1,
tickLength: 25,
tickColor: '#EEEEEE',
dateTimeLabelFormats: {
day: '%e %b',
week: '%e %b',
month: '%b %y',
year: '%Y'
},
labels: {
x: 5,
y: -15
}
},
series: {
type: 'line'
},
outlineWidth: 1,
outlineColor: '#BDBDBD',
top: 60,
handles: {
borderColor: '#BDBDBD',
backgroundColor: '#EEEEEE'
}
},
rangeSelector: {
enabled: false
},
title: {
text: 'Volume Summary',
align: 'left',
style: {
color: '#717171',
fontSize: '12px',
fontWeight: 'bold'
}
},
xAxis: {
gridLineWidth: 0,
lineColor: '#BDBDBD',
dateTimeLabelFormats: {
hour: '%a %m/%e<br/>%l %p',
day: '%a<br/>%e %b',
week: '%e %b',
month: '%b %y',
year: '%Y'
},
labels: {
align: 'left',
y: 23
},
tickWidth: 1,
tickLength: 7
},
yAxis: [{
title: {
text: 'Latency',
x: 0
...