score:3

Accepted answer

you can use a loop over each point and translate position by attr() function.

    var max = chart.yaxis[0].topixels(chart.series[0].data[0].y, true);

    $.each(chart.series[1].data, function (i, d) {
        d.datalabel.attr({
            y: max - 20
        });
    });

example: http://jsfiddle.net/sbochan/l02awbfe/7

score:0

even more simple than a function, you can just set the verticalalign property to top and then set the y property to -20.

setting verticalalign to "top" will move the data label toward the top of the column, but it is still within the column itself. however, this is the same relative location on all columns, so setting the y to -20 will move the data label up by 20 placing it just above the column. you can adjust the y value to your needs.

this works for me on a stacked column chart with a line chart overlay as well. i have one data label per column which shows the {point.stacktotal} for each column.

score:0

this didn't work for your example, but it did work for my columnrange where i was trying to do the same thing and it is way easier so i thought i would add it for people to try before messing with custom formatting.

adding the yaxis property opposite and set it to true worked for me. unfortunately when trying it in your fiddle it didn't work in this specific instance. 

yaxis:{
  opposite: true,
}

Related Query

More Query from same tag