JSFiddle - React, Tailwind, and code Playground
by JoeKuan
HTML
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div id="container"></div>
</body>
JavaScript
$(document).ready(function() {
document.title = 'Highcharts ' + Highcharts.version;
var wiiColor = '#BBBBBB';
var x360Color = '#89A54E';
var ps3Color = '#4572A7';
var splineColor = '#FF66CC';
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
borderWidth: 1,
spacingTop: 40,
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [ [ 0, '#0A0A0A' ],
[ 1, '#303030' ] ]
},
events: {
click: function(e) { console.log(e); }
}
},
title: {
text: null
},
subtitle: {
text: 'Number of consoles sold (in millions)',
floating: true,
y: -5
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Source: vgchartz'
},
xAxis: {
//categories: [ '2008', '2009', '2010', '2011' ],
minPadding: 0.2,
tickInterval: 1,
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#CFCFCF'
}
}
},
legend: {
itemStyle: {
color: '#CFCFCF'
}
},
yAxis: [{
title: {
text: 'Number of games sold',
align: 'low',
style: {
color: '#CFCFCF'
}
},
labels: {
style: {
color: '#CFCFCF'
...