Highcharts change dataLabel option 'inside' by function

Question

We are trying to set up dataLables within a waterfall chart depending on the size of the rendered rectangular.

In more detail, we aim for a solution that places the dataLabel outside the rectangular (by option inside: false) if the rectangular heigth is <= the fontSize of the dataLabel (in our case 11).

Fiddle example

$(function () {

var chart = new Highcharts.Chart({
    chart: {
        type: 'waterfall',
        renderTo: 'container'
    },

    title: {
        text: 'Highcharts Waterfall'
    },

    xAxis: {
        type: 'category'
    },

    yAxis: {
        title: {
            text: 'USD'
        }
    },

    legend: {
        enabled: false
    },

    tooltip: {
        pointFormat: '<b>${point.y:,.2f}</b> USD'
    },

    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function () {
                    return Highcharts.numberFormat(this.y, 0, ',') + 'k';
                },
                style: {
                    fontSize: 11,
                    color: 'white'
                }
            },
            pointPadding: 0
        }
    },

    series: [{
        color: Highcharts.getOptions().colors[0],
        data: [{
            name: 'Start',
            y: 5
        }, {
            name: 'Product Revenue',
            y: 10
        }, {
            name: 'Service Revenue',
            y: 0.5
        }, {
            name: 'Fixed Costs',
            y: 3
        }, {
            name: 'Variable Costs',
            y: 5
        }]
    }]
},

function (chart) {
    var points = chart.series[0].points;

    for (var i = 0; i < points.length; i++) {

        if (points[i].shapeArgs.height <= 11) {
            // place dataLabel of this point outside and change color
            points[i].dataLabel.attr({
                color: 'black',
                inside: false
            });

        }
    };
});
});`   

In general our problem is that we don't know exactly how to change chart options properly after the chart is rendered. So we would be very pleased if anyone can explain this to us as well.

Answer 1

In case when you would like to update color, you need to use css() function, but if you need to move label, you need to use attr() or translate() function.

http://jsfiddle.net/e4HCn/2/

points[i].dataLabel
            .css({
                color: 'red'
            })
            .attr({
                y: y
            });