score:9

Accepted answer

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({});

});

score:9

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


Related Query

More Query from same tag