dynamically change label to show the y-axis min and max value

Question

I want to get y-axis min and max value label using button. And it should update the label when I choose different chart to display. Now if I click the get label button and it show the correct extreme value label, but if I go on to click the range button or input range box, it will not auto update the label. How to fix this? thanks here is the jsfiddle link JS

html code:

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>
<button id="button">Get Y axis extremes</button>

my js code:

$(function() {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {
                selected : 1,
                inputEnabled: $('#container').width() > 480
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
        // the button action
    $('#button').click(function() {
        var chart = $('#container').highcharts(),
            extremes = chart.yAxis[0].getExtremes();

        chart.renderer.label(
            'dataMax: '+ extremes.dataMax +'<br/>'+
            'dataMin: '+ extremes.dataMin +'<br/>'+
            'max: '+ extremes.max +'<br/>'+
            'min: '+ extremes.min +'<br/>',
            100,
            100
        )
        .attr({
            fill: '#FCFFC5',
            zIndex: 8
        })
        .add();

        //$(this).attr('disabled', true);
    });
    });

});

Answer 1

Use the chart redraw event.

Make your label addition a function:

function addLabel(){
    var chart = $('#container').highcharts(),
            extremes = chart.yAxis[0].getExtremes();

        chart.renderer.label(
            'dataMax: '+ extremes.dataMax +'<br/>'+
            'dataMin: '+ extremes.dataMin +'<br/>'+
            'max: '+ extremes.max +'<br/>'+
            'min: '+ extremes.min +'<br/>',
            100,
            100
        )
        .attr({
            fill: '#FCFFC5',
            zIndex: 8,
            id :'myLabel'
        })
        .add();
}

Then in the event, if the label's been previously added update it:

        chart: {
             events: {
                 redraw: function() {
                     var oL = $('#myLabel');
                     if (oL.length){
                         oL.remove();
                         addLabel();
                     }
                 }
             }
         },

Here's an updated fiddle.