Highcharts single label formatting
This is a bit of a hack.
by jacobwsmith
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',
height: 280
},
xAxis: {
categories: ['Oct', 'Nov', 'Dec']
},
plotOptions: {
column: {
pointPadding: 0,
groupPadding: 0.2,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
y: 25,
style: {
fontSize: '12px',
fontWeight: 'normal'
},
formatter: function() {
// With our font, fontSize, label positioning at 25,
// and the labels being on one line
// it seems that our label boxes require 32.5px of space
// otherwise the align outside of the column
var barFromTop = this.point.plotY,
chartHeight = this.series.chart.plotHeight,
color = chartHeight - barFromTop > 32.5 ? 'white' : 'black';
console.log('barFromTop: ' + barFromTop);
console.log('chartHeight: ' + chartHeight);
console.log(chartHeight - barFromTop);
console.log('color: ' + color);
return '<span style="color: ' + color + '">' + this.y + ' M</span>';
},
verticalAlign: "middle"
},
}
},
series: [{
data: [216.4, 61.7089, 2.33]
}]
});
});