score:5

Accepted answer

You can use chart renderer and svg attribiute.

http://jsfiddle.net/S8f86/4/

this.renderer.button('Change background color', 74, 30, function(){

                        var gradient = {
                            linearGradient: [0, 0, 0, 400],
                            stops: [ [0, 'rgb(96, 96, 96)'], 
                                     [1, 'rgb(16, 16, 16)'] ]
                        };

                    chart.chartBackground.attr({
                        fill:gradient
                    });

                    }).add();

score:5

Highcharts doesn't have an API call to do this. However, you can get at the underlying elements and apply some css styling to them. e.g.

chart.chartBackground.css(
        {
            color: '#555555',
        });

http://jsfiddle.net/xzUcC/

As you are manipulating the dom directly, there is no need to call redraw() on the chart.

As mentioned by another poster, you can do graduated backgrounds as follows:

 var gradient = {
        linearGradient: [0, 0, 0, 400],
                 stops: [ [0, 'rgb(96, 96, 96)'], 
                          [1, 'rgb(16, 16, 16)'] ]
        };
        chart.chartBackground.attr({
                 fill:gradient
        });

Related Query

More Query from same tag