JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
marginRight:20
},
colors: ["#4e7ad2"]
,
title: {
text: ''
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y'
},
tickInterval: Date.UTC(2010, 0, 1) - Date.UTC(2009, 0, 1)
},
yAxis: {
title: {
text: 'Percentage'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: {point.y} %'
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Test',
data: [
[Date.UTC(2011,2,31), 28.84],[Date.UTC(2012,2,31), 32.65]
]
}] // End series
});
});