Highchart legend over columns

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

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.

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

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.