title: change barchart background color dynamically in highcart
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>Please help me to solve this problem, i don't have any idea how to do this</p>
  
  <p>Following is my code for bar chart: <a href="http://jsfiddle.net/8eJ4p/85/" rel="nofollow">http://jsfiddle.net/8eJ4p/85/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(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 '&lt;i&gt;' + this.points[1].x +'&lt;/i&gt;: &lt;b&gt;'+ Math.round(this.points[1].percentage) +'%&lt;/b&gt;';
                  }
              },
              series: [{
                  name: 'background filler',
                  data: [7, 9, 8, 5, 10]
              }, {
                  name: 'actual Value',
                  data: [5, 3, 4, 7, 2]
              }]
          });
      });
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="white" style="width: 60px; height: 20px; margin: 5px;float:left; background-color:skyblue;cursor:pointer"&gt;White&lt;/div&gt;
  &lt;div id="black" style="width: 60px; height: 20px; margin: 5px;background-color:red;float:left;cursor:pointer"&gt;Black&lt;/div&gt;
  
  &lt;div id="container" style="min-width: 310px; height: 250px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>