JSFiddle - React, Tailwind, and code Playground
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="border: 2px solid #a1a1a1; width:350; height: 150; border-radius: 3px; " >
<div id="container" ></div>
</div>
</body>
JavaScript
$(function () {
var chart;
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
height: 250
},
title: {
text: 'Market Data: Nasdaq & Dow Jones'
},
subtitle: {
text: 'May 11, 2012'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%I:%M %P', this.value);
},
y: 17
},
gridLineDashStyle: 'dot',
gridLineWidth: 1,
lineWidth: 2,
lineColor: '#92A8CD',
tickWidth: 3,
tickLength: 6,
tickColor: '#92A8CD',
minPadding: 0.02,
offset: 1
},
yAxis: [{
title: {
text: 'Nasdaq'
},
}, {
title: {
text: 'Dow Jones'
},
opposite: true
}],
credits: {
enabled: false
},
series: [{
name: 'Nasdaq',
color: '#4572A7',
yAxis: 0,
data: [ [ Date.UTC(2012, 4, 11, 9, 30), 2606.01 ], [ Date.UTC(2012, 4, 11, 10), 2622.08 ],
[ Date.UTC(2012, 4, 11, 10, 30), 2636.03 ], [ Date.UTC(2012, 4, 11, 11), 2637.78 ],
[ Date.UTC(2012, 4, 11, 11, 30), 2639.15 ], [ Date.UTC(2012, 4, 11, 12), 2637.09 ],
[ Date.UTC(2012, 4, 11, 12, 30), 2633.38 ],
[ Date.UTC(2012, 4, 11, 13), 2632.23 ], [ Date.UTC(2012, 4, 11, 13, 30), 2632.33 ],
[ Date.UTC(2012, 4, 11, 14), 2632.59...