Quiero cambiar el rango en un gráfico dinámicamente. Si paso de un gran valor a uno más pequeño, todo funciona bien. Pero si quiero volver a ser más grande, no pasa nada.

Puedes probar esto aquí:http://jsfiddle.net/Charissima/wkBwW/15/

Haga clic en el botón 'Rango 50' y después en 'Rango 20'. Luego 'Rango 50' de nuevo. Puedes ver el cambio de color pero no el rango.

Me esforcé por descubrir cómo solucionar este problema, pero sin éxito. Espero que alguien me pueda ayudar.

<div id="container" style="height: 400px; min-width: 600px"></div>

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

<button id="button_20">Range 20</button>
<button id="button_50">Range 50</button>

$(function() {
$('#container').highcharts({  

    chart: {
    },

    rangeSelector: {
        enabled: false          
    },

    exporting: {
        enabled: false
    },

    title : {
        text : 'Ranges'
    },

    navigator: {
        enabled: true,
    },

    xAxis: {
        lineColor: '#ffcc00'
    },

    series : [{
        name : 'Random data',
        data : (function() {
            // generate an array of random data
            var data = [], i;
            for( i = 1; i <= 100; i++) {
                data.push([
                    i,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        })()
    }]

});

// the button action
$('#button_20').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].update({
        lineColor: '#00ff00',           
        range: 20
    });     
});

$('#button_50').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].update({
        lineColor: '#E22636',           
        range: 50
    });     
  });        
});