highcharts - Highcharts は関数によって dataLabel オプション 'inside' を変更します

Question

レンダリングされた長方形のサイズに応じて、ウォーターフォール チャート内に dataLables を設定しようとしています。

より詳細には、長方形の高さが dataLabel の fontSize 以下 (この場合は 11) の場合、dataLabel を長方形の外側に配置するソリューションを目指します (オプション inside: false を使用)。

フィドルの例

$(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
            });

        }
    };
});
});`   

一般的に、私たちの問題は、チャートがレンダリングされた後にチャート オプションを適切に変更する方法が正確にわからないことです。ですから、誰かが私たちにもこれを説明してくれれば、とてもうれしいです。