How to change the background color of the Highcharts(HighMaps in specific) dynamically?

Question

when a user selects a theme in a page,the backgroundcolor of the highchart should also change based on the user selection . My code:

    var colorCode="#fff";



var chart1=new Highcharts.mapChart('geoMap', {
 chart: {

     backgroundColor:colorCode,
     type: 'map'


 },
 title: {
     text: 'US'
 },

 legend: {
     enabled: true
 },
......
......
......
$('#theme1').click(function() {
    // colorCode="default"
     colorCode={
               linearGradient: [0, 0, 500, 500],
               stops: [
                 [0, 'rgb(142, 158, 171)'],
                 [1, 'rgb(238, 242, 243)']
               ]
             }

chart1.redraw();
});

But the chart isn't getting refreshed so the colorCode is not getting applied. Any kind of suggestion would be helpful.

Answer 1

You need to actually assign the new color to the chart options

chart1.options.chart.backgroundColor = colorCode

i made a small fiddle that takes the color from a dropdown (which would emulate your user changing the theme) and sets it as the background of you chart http://jsfiddle.net/grLrmxhd/1/