title: change theme of highscharts (highstock) chart
body: <p>Apologies if this is very basic, but I'm somehow lost on it: I would like to add a Highstock/Highcharts chart to an application that I'm working on, but I would like to use a theme other than the default one (I would like to use <code>dark-unica</code>. I saw <a href="https://www.highcharts.com/docs/chart-design-and-style/themes" rel="noreferrer">this reference to highcharts themes</a>, but somehow I still don't understand how to get that done. Can anyone please tell me how to do that?</p>
  
  <p>Here is the html code (from the <code>examples/compare/</code> folder):</p>
  
  <p><strong>index.html</strong> (source: <a href="https://www.highcharts.com/download" rel="noreferrer">https://www.highcharts.com/download</a>):</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Highstock Example&lt;/title&gt;
  
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="dark-unica.js"&gt;&lt;/script&gt;  &lt;-! this has no effect --&gt;
          &lt;script type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;!-- &lt;style type="text/css"&gt;
  ${demo.css}
          &lt;/style&gt; --&gt;
      &lt;/head&gt;
      &lt;body&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/modules/exporting.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="container" style="height: 400px; min-width: 310px"&gt;&lt;/div&gt;
  
  
          &lt;script type="text/javascript"&gt;
  
  var seriesOptions = [],
      seriesCounter = 0,
      names = ['MSFT', 'AAPL', 'GOOG'];
  
  /**
   * Create the chart when all data is loaded
   * @returns {undefined}
   */
  function createChart() {
  
      Highcharts.stockChart('container', {
  
          rangeSelector: {
              selected: 4
          },
  
          yAxis: {
              labels: {
                  formatter: function () {
                      return (this.value &gt; 0 ? ' + ' : '') + this.value + '%';
                  }
              },
              plotLines: [{
                  value: 0,
                  width: 2,
                  color: 'silver'
              }]
          },
  
          plotOptions: {
              series: {
                  compare: 'percent',
                  showInNavigator: true
              }
          },
  
          tooltip: {
              pointFormat: '&lt;span style="color:{series.color}"&gt;{series.name}&lt;/span&gt;: &lt;b&gt;{point.y}&lt;/b&gt; ({point.change}%)&lt;br/&gt;',
              valueDecimals: 2,
              split: true
          },
  
          series: seriesOptions
      });
  }
  
  $.each(names, function (i, name) {
  
      $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&amp;callback=?',    function (data) {
  
          seriesOptions[i] = {
              name: name,
              data: data
          };
  
          // As we're loading the data asynchronously, we don't know what order it will arrive. So
          // we keep a counter and create the chart when all the data is loaded.
          seriesCounter += 1;
  
          if (seriesCounter === names.length) {
  
              createChart();
          }
      });
  });
  
  // Highcharts.setOptions(Highcharts.dark-unica);  // &lt;----- this does not work
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>