title: Javascript set theme for each graph
body: <p><a href="http://www.highcharts.com/demo/line-basic/sand-signika" rel="nofollow">http://www.highcharts.com/demo/line-basic/sand-signika</a></p>
  
  <p>I have several graphs in one page and they are all loaded within the same page.</p>
  
  <p>I want to set theme for each graph differently but the problem is the theme that is set at first overwrites all the themes for next coming graphs. Is there any way that I can set <code>HighChart</code>'s theme locally for each graphs?</p>
  
  <pre><code>/**
   * Sand-Signika theme for Highcharts JS
   * @author Torstein Honsi
   */
  
  // Load the fonts
  Highcharts.createElement('link', {
     href: 'http://fonts.googleapis.com/css?family=Signika:400,700',
     rel: 'stylesheet',
     type: 'text/css'
  }, null, document.getElementsByTagName('head')[0]);
  
  // Add the background image to the container
  Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {
     proceed.call(this);
     this.container.style.background = 'url(http://www.highcharts.com/samples/graphics/sand.png)';
  });
  
  
  Highcharts.theme = {
     colors: ["#f45b5b", "#8085e9", "#8d4654", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
        "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
     chart: {
        backgroundColor: null,
        style: {
           fontFamily: "Signika, serif"
        }
     },
     title: {
        style: {
           color: 'black',
           fontSize: '16px',
           fontWeight: 'bold'
        }
     },
     subtitle: {
        style: {
           color: 'black'
        }
     },
     tooltip: {
        borderWidth: 0
     },
     legend: {
        itemStyle: {
           fontWeight: 'bold',
           fontSize: '13px'
        }
     },
     xAxis: {
        labels: {
           style: {
              color: '#6e6e70'
           }
        }
     },
     yAxis: {
        labels: {
           style: {
              color: '#6e6e70'
           }
        }
     },
     plotOptions: {
        series: {
           shadow: true
        },
        candlestick: {
           lineColor: '#404048'
        },
        map: {
           shadow: false
        }
     },
  
     // Highstock specific
     navigator: {
        xAxis: {
           gridLineColor: '#D0D0D8'
        }
     },
     rangeSelector: {
        buttonTheme: {
           fill: 'white',
           stroke: '#C0C0C8',
           'stroke-width': 1,
           states: {
              select: {
                 fill: '#D0D0D8'
              }
           }
        }
     },
     scrollbar: {
        trackBorderColor: '#C0C0C8'
     },
  
     // General
     background2: '#E0E0E8'
  
  };
  
  // Apply the theme
  Highcharts.setOptions(Highcharts.theme);
  </code></pre>