JSFiddle - React, Tailwind, and code Playground
by Fusher
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() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=large-dataset.json&callback=?', function(data) {
// Create a timer
var start = + new Date();
// Create the chart
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false,
type: 'column',
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: [{
title: {
text: 'Temperature (°C)'
}
},{
title: {
text: 'T'
},
min:-20,
max:0,
opposite: true
}],
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2004-2010'
},
subtitle: {
text: 'Built chart at...' // dummy text to...