I have a total of eight small fever charts. Four for grants and four charts for loans.

Using:

Highcharts.setOptions({
    chart: {
        backgroundColor: null
    }, 
    etc...
});

and then access those settings using:

var chart1 = new Highcharts.Chart({
    chart: {renderTo: 'smallChart1'},
    series: [{data: [13334, 14376, 15825, 16267]}]
});

I am able to make the first four charts all follow the single set of options.

So that works fine. But now I want to setOptions for the second group of charts but I don't know how to make a second set of setOptions the other four charts can share.

Thanks.

I have a total of eight small fever charts. Four for grants and four charts for loans.

Using:

Highcharts.setOptions({
    chart: {
        backgroundColor: null
    }, 
    etc...
});

and then access those settings using:

var chart1 = new Highcharts.Chart({
    chart: {renderTo: 'smallChart1'},
    series: [{data: [13334, 14376, 15825, 16267]}]
});

I am able to make the first four charts all follow the single set of options.

So that works fine. But now I want to setOptions for the second group of charts but I don't know how to make a second set of setOptions the other four charts can share.

Thanks.

• javascript
• highcharts

3 Answers 3

SetOptions can be used single time, because overwrites global settings, and again calling doens't work.

SetOptions Can be used only once in highcharts.

See jsfiddle. It is releveant to your question. It shows how to use SetOptions for multiple charts.

If you want to set different options for different charts, just don't use the global configuration. Only use the global setOptions({ ... }) for things you want to be the same in every chart. To override the options for the series just pass in the styles.

for example, say I wanted the font to be the same in every chart and a minPointLength, but I wanted more fine tuned control in the series... It might look something like this.

// global configuration
Highcharts.Highcharts.setOptions({
  chart: {
    style: {
      fontFamily: '"FFMarkWebProRegular", Helvetica, Arial, sans-serif',
    },
  },
  plotOptions: {
    series: {
      minPointLength: 1, // global setting on series
    },
  },
});

e.g. - the configuration for a given plot

// specific waterfall plot
const config = {
    title: null,
    chart: {
      type: 'waterfall',
    },
    series: [
      {
        borderWidth: 0,  // more specific settings
        ...
        data: waterfallData,
        pointPadding: 0,
      },
    ],
  }