Highcharts.js - multiple topics on one page?

Question

I have about 6 diagrams on one page, one of them should have another theme from five others. I have themes that work individually, but the second initialized one applies to all diagrams.

Can I indicate which topic the chart uses?

Answer 1

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

A very 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 for now would be to combine 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 separate themes for each chart, if you also need