JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
JavaScript
$(function() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 30,
marginBottom: 70,
marginTop: 60,
zoomType: 'x',
spacingRight: 10,
spacingBottom: 30,
paddingTop: 20
},
title: {
text: '[X] Gráfico de Velocidade'
},
exporting: {
filename: 'grafico-velocidade'
},
subtitle: {
text: '03/06/2013 - 05/06/2013',
floating: true,
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: 20
},
tooltip: {
yDecimals: 0,
animation: false,
ySuffix: " km/h"
},
navigator: {
enabled: true
},
scrollBar:
{
enabled: true
},
rangeSelector: {
selected: 3,
inputEnabled: false,
enabled: false,
buttonSpacing: 5,
buttonSpacing: 50,
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
style: {
color: '#039',
fontWeight: 'normal'
},
states: {
hover: {
fill: 'white'
},
select: {
style: {
color: 'blue'
}
}
}
},
buttons: [{
type: 'day',
count: 1,
text: '1 Dia'
}, {
type: 'day',
count: 3,
text: '3 Dias'
}, {
type: 'week',
count: 1,
text: '1 Semana'
}, {
type: 'all',
text: 'Redefinir Zoom'
}]
},
xAxis: {
labels: {
rotation: -90,
align: 'right'
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%d/%m<br/>%H:%M',
minute: '%d/%m<br/>%H:%M',
hour:...