Highcharts: setOptions for two different series of

Question

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.

Answer 1

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.

Answer 2

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,
      },
    ],
  }

Answer 3

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