Set global options and override defaults

[Diferno]

Hi!
I'm trying to override the default options of the charts (to set the fontfamily for all the legends, axis, etc...) but can't find the correct way to do so.

I have my plugin registered as:

  Vue.use(VueApexCharts)
  Vue.component('apexchart', VueApexCharts)

And have tryed to override like:

VueApexCharts.chartOptions = Object.assign(VueApexCharts.chartOptions, {
    xaxis: {
      labels: {
        style: {
          fontFamily: 'Montserrat'
        }
      }
    }
  })

And even trying to set the defaults as I do with axios through
VueApexCharts.props.options

Any tips?
Thx in advance!

[junedchhipa]

Can you try setting the global Apex variable?

Apex.xaxis = {
   labels: {
     style: {
          fontFamily: 'Montserrat'
      }
   }
}

This would override the default settings for the x-axis.
Let me know if it worked.

[joshhoegen]

@Diferno, any luck with @junedchhipa's suggestion?

@junedchhipa, are you suggesting that Apex === VueApexCharts if using Diferno's syntax? If so, that's not working for me.

[junedchhipa]

Apex !== VueApexCharts

window.Apex is a global variable and it should be set after importing and registering Vue-ApexCharts using

Vue.use(VueApexCharts)
window.Apex.xaxis = { ... }

After this, when you use <apexcharts> component, it will get the default values first from window.Apex and then use your chart's config.

[joshhoegen]

Oooohhhh! Thank you very much for this insight, @junedchhipa! This will be beneficial for app light/dark theming!

[sajaddp]

@junedchhipa,
Can you help me to change all font-family attributes globally?

[junedchhipa]

@sajaddp
To set font-family for all elements of the chart, you can use

options = {
   chart: {
      fontFamily: 'Courier New', Courier, monospace
   }
}

[alarhoo]

Apex !== VueApexCharts

window.Apex is a global variable and it should be set after importing and registering Vue-ApexCharts using

Vue.use(VueApexCharts)
window.Apex.xaxis = { ... }

After this, when you use <apexcharts> component, it will get the default values first from window.Apex and then use your chart's config.

How can we do it for ng-apexcharts?

window.Apex has no data.

[phamhunker]

I know this ticket is closed and a bit old - but it was one of the first posts i found, so posting it here in case anyone else runs into this and needs help.

For anyone using ng-apexcharts, doing global options is simply...

    apexChart = window['Apex'] as ApexOptions;
    this.apexChart.chart = {
      type: 'line',
      toolbar: {
        show: true,
       ...
      },
      zoom: {
        enabled: false,
      },
    };

    this.apexChart.legend = {
      show: true,
      ...
    };