Animate datalabel

author(s): Koos Zoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; width: 500px"></div>
<button id="update">Update chart</button>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },

        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true // if I use enabled:false, dataLabels style from point update DOES work
                }
            }
        },
        
        series: [{
            data: [1500, 1000, 2000]
        }]

    });



    $('#update').click(function () {

           
                y: 2000,
                dataLabels: {
                    enabled: true,
                    formatter:function () {
                    return this.y + '%'
                    },
                    style: {
                        fontWeight: 'bold',
                        color: "rgba(33,131,33,1)"
                    }
                },
                color: 'rgba(146, 252, 152, 0.8)'
            });
       });
});