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 () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May'
]
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
},
labels: {
enabled: true,
formatter: function() {
return parseInt((this.value * this.value ) + 1);
}
}
},
tooltip: {
formatter: function() {
return ''+
this.x + ': ' + parseInt((this.y * this.y) + 1) +' mm';
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Tokyo',
data: [33.166, 14.832, 10.488, 7.41, 2.23]
}]
});
});
});