Unable to set global setOptions()

[684efs3]

I am using Nuxt. When I try to set global options like this:

import Vue from 'vue'
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'

Highcharts.setOptions({
    // options here
})

Vue.use(HighchartsVue, {
    highcharts: Highcharts
})

I get this error: highcharts__WEBPACK_IMPORTED_MODULE_1___default.a.setOptions is not a function

[Denyllon]

Hi @684efs3 ,

Thank you for contacting us, and sorry for not responding so long. It looks like the Highcharts module is not accessible on runtime. Have you tried to use it as a plugin, and check whether the Highcharts instance type of an object?

Take a look on this example: https://codesandbox.io/s/funny-engelbart-jso7q?file=/plugins/highcharts.js

Most probably this issue is not related with this wrapper though, but I will keep the issue opened.

Kind regards!

[JohnMica]

just to say that I can set global option in a plugin using Nuxt js

// plugins/highcharts.js

import Vue from 'vue'
import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
import highchartsMore from 'highcharts/highcharts-more'
import dumbbell from 'highcharts/modules/dumbbell'
import lollipop from 'highcharts/modules/lollipop'
import HC_exporting from 'highcharts/modules/exporting'
import xRange from 'highcharts/modules/xrange'
import noData from 'highcharts/modules/no-data-to-display'

const options = {
  legend: { enabled: false },
  credits: { enabled: false },
  exporting: { enabled: false },
  chart: {
    style: {
      fontFamily: '"Roboto", sans-serif'
    }
  }
}
if (typeof Highcharts === 'object') {
  highchartsMore(Highcharts)
  HC_exporting(Highcharts)
  xRange(Highcharts)
  dumbbell(Highcharts)
  lollipop(Highcharts)
  noData(Highcharts)
  Highcharts.setOptions({
    ...options
  })
}

Vue.use(HighchartsVue, { tagName: 'highcharts' })

and use it in nuxt.config.js

....
  plugins: [
     ....
    '~/plugins/highcharts.js',
    ....
]

[jszuminski]

If you're using Nuxt, you should add an additional if:

if (typeof Highcharts === 'object') {
  Highcharts.setOptions({
    ...options
  })
}

Everything seems to work as expected then.