JSFiddle - React, Tailwind, and code Playground
by Ben Clayton
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
$(document).ready(
function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
zoomType: 'xy'
},
title: {
text: 'My Title'
},
subtitle: {
text: 'July 2013'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
}
},
yAxis: [{ // Primary yAxis
labels: {
style: {
color: '#AA4643'
}
},
title: {
text: 'Dat1',
style: {
color: '#AA4643'
}
},
min: 0
}, { // Secondary yAxis
labels: {
style: {
color: '#4572A7'
}
},
title: {
text: 'Dat2',
style: {
color: '#4572A7'
}
},
opposite: true,
min: 0
}],
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y;}
},
series: [{
name: 'Dat1',
color: '#AA4643',
yAxis: 0,
data: [[1376193800000, 55],[1376092900000, 56]],
pointInterval: 24 * 3600 * 1000,
}, {
name: 'Dat2',
color: '#4572A7',
yAxis: 1,
data: [[Date.UTC(2013, 06, 10), 9],[Date.UTC(2013, 07, 11), 22],[Date.UTC(2013, 07, 12), 8],[Date.UTC(2013, 07, 13), 12],[Date.UTC(2013, 07, 14), 71],[Date.UTC(2013, 07, 15), 230],[Date.UTC(2013, 07, 16), 50],[Date.UTC(2013, 07, 17), 670],[Date.UTC(2013, 07, 18), 35],[Date.UTC(2013, 07, 19), 8],[Date.UTC(2013, 07, 20), 1],[Date.UTC(2013, 07, 21),...