Highcharts.js - multiple themes on same page?

Question

I have about 6 charts on one page, one of them needs to have a different theme from the other five. I have the themes working individually but the second one initialized is applied to all the charts.

Is there a way to specify which theme a chart uses?

Answer 1

After reading Ricardo's comment I realized I just had to move the setOptions() call inside the $(document).ready call.

A much simplified version of my code:

Highcharts.theme1 = {
    chart: {
        borderWidth: 0,
    },
}; 

var chart;
$(document).ready(function() {

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme1);

    // Build the chart
    chart = new Highcharts.Chart({});

});

Highcharts.theme2 = {
    chart: {
        borderWidth: 5,
    },
};

var chart2;
$(document).ready(function() {

    // Apply the theme
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme2);

    // Build the chart
    chart = new Highcharts.Chart({});

});

Answer 2

Best practice currently would be to merge in the theme with your chart options:

chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));

var options1 = {
    // options goes here
       chart: {
            renderTo: 'chart1',
            type: 'bar',
        },
        title: {
            text: 'Conversions'
        },
};

var theme1 = {
     // themes goes here
};

var chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));

this way you can set individual themes for each chart if you need too