change barchart background color dynamically in highcart

Question

I am creating a bar-chart using the Highcharts plugin, where i want to change the background color of bar-chart dynamically not the color of bars.

Basically i have 2 different themes 1 is white and other is black. so if i select Black then the background color of bar chart should change to black and if select white then it should change it to white. i searched in Highcharts plugin but i am unable to find out how to change the background color dynamically.

Please help me to solve this problem, i don't have any idea how to do this

Following is my code for bar chart: http://jsfiddle.net/8eJ4p/85/

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar',
                backgroundColor: "#000"
            },
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                min: 0,
                title: {
                    enabled: false
                },
                labels: {
                    enabled: false
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true,
                        formatter: function() { 
                            if(this.series.name != 'Filler')
                                return Math.round(this.percentage) + '%';
                            else return "";
                        }
                    }
                },
                series: {
                    pointWidth: 18,
                    stacking: 'percent',
                    dataLabels: {
                        enabled: true,
                        inside: true,
                        align: 'right',
                        color: '#fff'
                    }
                }
            },
            tooltip: {
                useHTML: true,
                shared: true,
                formatter: function() {
                    return '<i>' + this.points[1].x +'</i>: <b>'+ Math.round(this.points[1].percentage) +'%</b>';
                }
            },
            series: [{
                name: 'background filler',
                data: [7, 9, 8, 5, 10]
            }, {
                name: 'actual Value',
                data: [5, 3, 4, 7, 2]
            }]
        });
    });
    

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

<div id="white" style="width: 60px; height: 20px; margin: 5px;float:left; background-color:skyblue;cursor:pointer">White</div>
<div id="black" style="width: 60px; height: 20px; margin: 5px;background-color:red;float:left;cursor:pointer">Black</div>

<div id="container" style="min-width: 310px; height: 250px; margin: 0 auto"></div>

Answer 1

Highcharts background is stored in chart.chartBackground, which can be updated manually:

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

Live demo: http://jsfiddle.net/uwwgfu3a/

Answer 2

your best option is to wrap everything in a function with an argument that defines color,

then you can render the chart onLoad and register a listener on click for #black and #white

fiddle

---

in the case you only want to select background without rerendering use:

 $('#white').click(function(){$('rect.highcharts-background').css('fill','#fff')})
 $('#black').click(function(){$('rect.highcharts-background').css('fill','#000')})

fiddle