Update series data and color

by Black Label

HTML

<script src="http://code.highcharts.com/4.0.1/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Update</button>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar']
        },

        series: [{
            color:'green',
            data: [29.9, 71.5, 106.4]
        }, {
            //visible: false,
            color:'purple',
           data: [22, 65, 95]
        }]
    });

    // button handler
    var chart = $('#container').highcharts()
    var toggle = false;
    $('#button').click(function () {
        toggle = !toggle;
      
        chart.series[0].update({
            color: toggle ? 'red' : 'green'
        });
        chart.series[1].update({
            color: toggle ? 'blue' : 'purple'
        });

        if(chart.series[1].data.length==0){alert('No data in series 2!');}
    
        chart.series[0].data[0].update(toggle ? 20 : 40, false);
        chart.series[0].data[1].update(toggle ? 30 : 60, false);

        chart.series[1].data[0].update(toggle ? 40 : 70, false);
        chart.series[1].data[1].update(toggle ? 50 : 105, false);

        chart.redraw({
            duration: 750
        });
    });
});