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: 'column',
spacingLeft: 20,
plotBackgroundImage: './chartBg.png',
inverted: true
},
title: {
text: null
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Source: U.S. Patent & Trademark Office'
},
xAxis: {
categories: [ 'United States', 'Japan', 'South Korea', 'Germany', 'Taiwan',
'Canada', 'France', 'United Kingdom', 'China', 'Italy' ],
lineWidth: 0,
tickLength: 0,
labels: {
align: 'left',
x: 0,
y: -13,
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
title: {
text: null
},
labels: {
enabled: false
},
gridLineWidth: 0,
type: 'logarithmic'
},
plotOptions: {
column: {
colorByPoint: true,
dataLabels: {
enabled: true,
color: '#F4F4F4',
x: -50,
y: 0,
formatter: function() {
return Highcharts.numberFormat(this.y, 0);
},
style: {
fontWeight: 'bold'
}
}
}
},
...