How to dynamically update linear gradient to area in HighCharts?

Question

I'm trying to apply gradient in area chart.The chart is rerenderring after the update.but in this scenario,gradient is not updating.I appreciate any help.I'm ready to provide details further.Thank you in advance.

Here's my try,

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        plotOptions: {
            series: {
                fillColor: {
                    linearGradient: [0, 0, 0, 300],
                    stops: [
                        [0, '#E6C80E'],
                        [1, '#FEFC50']
                    ]
                }
            }
        },
        series: [{
            data: [20, 200, 100, 0.1, 150, 50, 30, 40, 300]
        }]

    });  
    chart.series[0].update({
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
        stops : [
            [0,'#c74350'],
            [1,'#fe7676']
        ]
    });
});

Here's the link http://jsfiddle.net/42fowwg0/

Answer 1

First of all you don't have the chart variable when you use chart.series[0].update. You can get it by using:

Highcharts.charts[0].series[0].update

See the console for errors, it shows that chart is undefined.

And for stops you are using the wrong format. Use it like this:

stops: [[0, '#c74350'],
        [1, '#fe7676']]

Here's the fiddle: http://jsfiddle.net/42fowwg0/2/