change theme of highscharts (highstock) chart
highcharts, html, javascript, themes
Solution
Simply add this line in your HTML after all highcharts include scripts
<script src="https://code.highcharts.com/themes/dark-unica.js"></script>
so it could look like this
<script src="https://code.highcharts.com/8.0.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/solid-gauge.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/exporting.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/treemap.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/export-data.js"></script>
<script src="https://code.highcharts.com/8.0.0/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/8.0.0/themes/dark-unica.js"></script>
Credit: @Fernanda Ines Duran (in the comments)
Problem
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 `dark-unica`. I saw this reference to highcharts themes, but somehow I still don't understand how to get that done. Can anyone please tell me how to do that? Here is the html code (from the `examples/compare/` folder): index.html (source: https://www.highcharts.com/download): ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highstock Example</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="dark-unica.js"></script> <-! this has no effect --> <script type="text/javascript"></script> <!-- <style type="text/css"> ${demo.css} </style> --> </head> <body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> <div id="container" style="height: 400px; min-width: 310px"></div> <script type="text/javascript"> 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 > 0 ? ' + ' : '') + this.value + '%'; } }, plotLines: [{ value: 0, width: 2, color: 'silver' }] }, plotOptions: { series: { compare: 'percent', showInNavigator: true } }, tooltip: { pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', 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&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); // <----- this does not work </script> </body> </html> ```