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
$(function () {
$(document).ready(function() {
document.title = "Highcharts " + Highcharts.version;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
borderWidth: 1
},
title: {
text: 'Number of Patents Granted',
},
credits: {
position: {
align: 'left',
x: 20
},
href: 'http://www.uspto.gov',
text: 'Source: U.S. Patent & Trademark Office'
},
xAxis: [{
categories: [
'2001', '2002', '2003', '2004', '2005',
'2006', '2007', '2008', '2009', '2010', '2011' ],
}, {
categories: [
'2001', '2002', '2003', '2004', '2005',
'2006', '2007', '2008', '2009', '2010', '2011' ],
opposite: true,
linkedTo: 0
}],
yAxis: {
title: {
text: 'No. of Patents'
},
labels: {
formatter: function() {
return Highcharts.numberFormat(Math.abs(this.value), 0);
}
}
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'UK',
data: [ 4351, 4190, 4028, 3895, 3553,
4323, 4029, 3834, 4009, 5038, 4924 ],
dataLabels : {
enabled: true,
backgroundColor: '#FFFFFF',
x: 40,
formatter: function() {
return Highcharts.numberFormat(Math.abs(this.total), 0);
},
...