JSFiddle - React, Tailwind, and code Playground
by Evan Sharp
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<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: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
Highcharts.setOptions({
lang:{
thousandsSep: ','
}
});
var now = new Date();
$('#container').highcharts({
chart: {
type: 'column'
},
navigation: {
buttonOptions: {
enabled: false
}
},
credits: false,
title: {
text: null
},
xAxis: {
type: 'datetime',
units: [
['month', [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]]
],
dateTimeLabelFormats:{
month: '%B'
},
tickLength: 10
},
yAxis: {
min: 0,
title: {
text: null
},
lineWidth: 1,
tickWidth: 1,
tickLength: 10,
gridLineWidth: 0,
reversedStacks: false
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
backgroundColor: null,
borderWidth: 0,
shadow: false,
reversed: true,
symbolPadding: 0,
symbolWidth: 0,
symbolRadius: 0,
symbolHeight: 0,
useHTML: true,
labelFormatter: function() {
console.log(this);
return '<div class="h4" style="color:'+this.color+'">'+this.name+'</div> $'+Highcharts.numberFormat(this.yData[this.yData.length-1].toFixed(2));
}
},
tooltip: {
formatter: function () {
console.log(this);
return '<b>' + Highcharts.dateFormat('%B', new Date(this.x)) + '</b><br/>' + this.series.name + ': $' + Highcharts.numberFormat(this.y.toFixed(2)) + '<br/>' +
(this.y/this.point.stackTotal*100).toFixed(2) + '%';
}
},
plotOptions: {
column: {
...