How to position datalabel at the base of bar series

Question

I have a (horizontal) bar chart and I want to add dataLabel's at the base (or left most part) of the bar for the series.

similar to this: http://flowingdata.com/2009/05/22/poll-results-what-data-related-area-are-you-most-interested-in/

Is there a way using the formatter function to set this value?

plotOptions: {
    bar: {         
        dataLabels: {
            formatter: function() {
                this.series.options.dataLabels.x =  ?????????????
                return this.y;
            },

Answer 1

The task of the formatter function is to format the label text. It gives you a way to modify the internal state of the chart, but that's really just a hack and as such may or may not work.

One way to place the labels at the base is to use stack-labels instead of data-labels (the data-labels will be placed at the top of the bar either aligned left or right). To configure stack labels at the base, do:

yAxis: {                         // The y axis is horizontal 'bar' layout
    stackLabels: {
        style: {
            color: 'white'       // Make the labels white
        },
        enabled: true,           // Enable stack labels
        verticalAlign: 'middle', // Position them vertically in the middle
        align: 'left'            // Align them to the left edge of the bar
    }
}

You will also need to set stacking to 'normal':

Example on jsfiddle:

Update: Labels for stack-totals will show the sum of all series for a specific category (stack) so only in the case of having one single series in the chart will stack-labels and data-labels show the same value.