JSFiddle - React, Tailwind, and code Playground
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
<body>
<div>
<div id="container"></div>
</div>
</body>
JavaScript
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
var volColor = '#AA4643';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
spacingRight: 30,
},
title: {
text: 'Market Data: Nasdaq 100'
},
subtitle: {
text: '2011 - 2012'
},
xAxis: {
categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
labels: {
y: 17
},
gridLineDashStyle: 'dot',
gridLineWidth: 1,
lineWidth: 2,
lineColor: '#92A8CD',
tickWidth: 3,
tickLength: 6,
tickColor: '#92A8CD',
// Need extra because there is a bug in Highcharts
minPadding: 0.04,
offset: 1,
},
yAxis: [{
title: {
text: 'Nasdaq index'
},
minorGridLineColor: '#D8D8D8',
minorGridLineDashStyle: 'dashdot',
gridLineColor: '#8AB8E6',
alternateGridColor: {
linearGradient: {
x1: 0, y1: 1,
x2: 1, y2: 1
},
stops: [ [0, '#FAFCFF' ],
[0.5, '#F5FAFF'] ,
[0.8, '#E0F0FF'] ,
[1, '#D6EBFF'] ]
},
lineWidth: 2,
lineColor: '#92A8CD',
tickWidth: 3,
tickLength: 6,
tickColor: '#92A8CD'
}, {
title: {
text: 'Volume'
},
labels: {
style: {
...