Is there a way to show a custom label on top of a bar chart?
I'm having trouble accessing the category name of a stack inside the formatter function of stacklabel. How can I achieve this?
stackLabels: {
enabled: true,
align: 'right',
style: {
color: 'green',
fontWeight: 'bold'
}
formatter: function () {
return usedInfoArray[category name];
},
align: 'right'
}
},
/**********************************************************/
Highcharts.chart('chartContainer', {
chart: {
type: 'bar'
},
title: {
text: ''
}
legend: {
maxHeight: 40,
itemWidth: 100,
itemStyle: {
color: '#FFF',
fontWeight: 'bold',
fontSize: 10
}
},
xAxis: {
categories: categories
},
yAxis: {
min: 0,
title: {
text: ''
},
stackLabels: {
enabled: true,
align: 'right',
style: {
color: 'green',
fontWeight: 'bold'
}
formatter: function () {
return usedInfoArray[xaxis value];
},
align: 'right'
}
},
plotOptions: {
series: {
stacking: 'normal',
pointWidth: 10,
groupPadding: 0.2
},
dataLabels: {
formatter: function () {
var dataLabel = this.x;
if (dataLabel.length > 10) {
dataLabel = dataLabel.substring(0, 10);
}
return dataLabel;
},
enabled: true
}
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: function () {
return usedInfoArray[point.x];
}
},
series: [{
name: 'Free',
'color': '#FFCC66',
data: freeData
}, {
name: 'Used',
'color': '#663399',
data: usedData
}]
});