Highchart legend over columns - highcharts

Question

is it possible in highchart to add the legend in each column with keeping
the value or label of each coulmn on top of the column like the attached image and this is my code on jsfiddle enter link description here
$('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
"plotOptions": {
"series": {
"dataLabels": {
"enabled": true,
"format": "${y}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": true,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}]
});

Answer 1

You can use the plotOptions.series.dataLabels.formatter instead of format:
dataLabels: {
enabled: true,
useHTML: true,
y: 30,
formatter: function() {
return "$" + this.y + "<br><br><br>" +
"<div style='-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);'>" +
this.series.name + "</div>";
}
}
You can tell the chart exactly the way you want the labels to be shown. this.y is the dollar values and this.series.name is the name of the series which are 2014 and 2015. y: 30 is where the label should be placed in respect to the top of the column. Here's a DEMO.
PS: The problem is that you cannot have two datalabels for each column. You either have to set the location for the top label (as mentioned in my answer) or set it for the bottom labels in this example. As you can see there are some problems in each example, but you can't have both. However there could be a workaround like this, but its not clean.

Answer 2

You can try to use stackLabels. Of course that solution will work only when you don't use stacking at all. See demo: http://jsfiddle.net/LLExL/4855/
Code:
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return "$" + this.total;
}
}
},
"plotOptions": {
"series": {
stacking: "normal",
"dataLabels": {
"enabled": true,
rotation: -90,
"format": "{point.series.name}"
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
Regarding aligning labels to the bottom, see this question.

Answer 3

I made some changes on solution of #Raeen to be exactly what i want
and here is the example demo
enter code jQuery('#container').highcharts({
"chart": {
"type": "column",
"style": {
"fontFamily": "Arial",
"fontSize": 12
},
"backgroundColor": "transparent",
"width": 460
},
title:{
text:''
},
tooltip: {
enabled: false
},
"plotOptions": {
"series": {
"dataLabels": {
"inside":true,
"enabled": true,
useHTML: true,
y: 30,
formatter: function() {
var html ='';
labelHeight = this.point.shapeArgs.height-15;
html += '<div class="data-label-wrapper" style="height:'+labelHeight+'px;">';
html += '<span style="color:'+this.series.color+';">$'+this.y+'</span>';
html += '<span class="serie-name" style="top:'+(labelHeight-25)+'px">'+this.series.name+'</span>';
html += '</div>';
return html ;
}
},
"pointPadding": 0,
"groupPadding": 0.1
}
},
"xAxis": [{
"categories": [
"Jan",
"Feb",
"Mar"],
}],
"series": [{
"name": "2014",
"color": "#231E1E",
"marker": {
"radius": 3
},
"showInLegend": false,
"connectNulls": true,
"tooltip": [
],
"data": [
10,
20,
30]
}, {
"name": "2015",
"color": "#1DBEDE",
"marker": {
"radius": 3
},
"showInLegend": false,
"connectNulls": true,
"tooltip": [
],
"data": [
12,
22,
32]
}] });
and now what i need if its possible to controll the number of gridlines numbers
to be like 3 instead of 8 that would be perfect.