How do I set global options with chart JS?

Question

Say I want some options to be global for all Apex charts. For colors it can be done with:

Apex.colors = ['#F44336', '#E91E63', '#9C27B0'];

Now what if I want all charts to be 300px high. What I try is:

Apex.chart.height = 300;
Apex.chart.width = '100%';

Because width and height are under chart according to their docs: https://apexcharts.com/docs/options/chart/height/ .

However this has no effect. Any ideas?

Answer 1

You already found an answer, but anyone looking for a full solution, here is how you set the global options for the options.chart property which applies to all the charts on that page.

Apex = {
  chart: {
    background: '#fefefe',
    height: 400,
    foreColor: '#333'
  }
}

Note that the variable Apex is a global variable equivalent to window.Apex and available everywhere.