JSFiddle - React, Tailwind, and code Playground
by Gereltod Gotsbayar
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: 300px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Төлбөрийн бичилтийн түүх'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Төлбөр (төг)'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
},
series: [{
name: 'Population',
data: [
['2014/01/17', 8199484.0],
['2014/02/17', 5237942.0],
['2014/03/17', 6574669.0],
['2014/04/17', 4269964.0],
['2014/05/19', 2408917.0],
['2014/06/20', 12024.0],
['2014/07/17', 52355.0],
['2014/08/20', 40833.0],
['2014/09/10', 1399746.0],
['2014/09/17', 40833.0],
['2014/10/17', 270453.0],
['2014/11/13', 2869320.0],
['2014/12/17', 7107883.0],
['2015/01/19', 7546811.0],
['2015/02/17', 8005173.0],
],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y:.1f}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});