highcharts-more - how to include?

[justmark]

I've been looking for information on how to include highcharts-more.js. I've added the following but still get a highcharts error (#17) in the console.

import VueHighcharts from 'vue2-highcharts';
import loadHighchartsMore from 'highcharts/highcharts-more';
import Highcharts from 'highcharts'

loadHighchartsMore(Highcharts)

Vue.use(VueHighcharts, { Highcharts });

Any suggestions on how to resolve this?

Thanks

[superman66]

You can see this demo Highcharts-More Demo

[justmark]

Thanks for the quick reply.

I'm trying to implement type 'errorbar', but keep getting error #17 from Highcharts.

I looked at you demo, and adjusted my imports:

import VueHighcharts from 'vue2-highcharts'
import More from 'highcharts/highcharts-more';
import Highcharts from 'highcharts'
More(Highcharts)

Components:

  components: {
    VueHighcharts
  },

Template:

vue-highcharts( :options="monthlyOptions" ref="monthlyChart" )

I do have "monthlyOptions" defined in the data block. The chart is loading other types properly (splines, etc.) It generates the error when trying to use the errorbar.

Here is the error in the console:

warn @ vue.esm.js?efeb:578
logError @ vue.esm.js?efeb:1713
globalHandleError @ vue.esm.js?efeb:1708
handleError @ vue.esm.js?efeb:1697
(anonymous) @ vue.esm.js?efeb:1815
flushCallbacks @ vue.esm.js?efeb:1734
Promise.then (async)
microTimerFunc @ vue.esm.js?efeb:1782
nextTick @ vue.esm.js?efeb:1826
queueWatcher @ vue.esm.js?efeb:3041
update @ vue.esm.js?efeb:3182
notify @ vue.esm.js?efeb:684
reactiveSetter @ vue.esm.js?efeb:1009
proxySetter @ vue.esm.js?efeb:3273
__WEBPACK_IMPORTED_MODULE_1_axios___default.a.get.then.result @ Monthly.vue?b40e:156
Promise.then (async)
getMonthly @ Monthly.vue?b40e:148
boundFn @ vue.esm.js?efeb:189
__WEBPACK_IMPORTED_MODULE_0_vue__.a.nextTick @ Report.vue?d1ef:302
(anonymous) @ vue.esm.js?efeb:1813
flushCallbacks @ vue.esm.js?efeb:1734
13:52:29.135 vue.esm.js?efeb:1717 Error: Highcharts error #17: www.highcharts.com/errors/17
    at Object.a.error (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:10:49)
    at a.Chart.initSeries (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:240:283)
    at eval (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:314:128)
    at a.fireEvent (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:29:106)
    at a.Chart.addSeries (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:314:85)
    at VueComponent.delegateMethod (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:62:50)
    at VueComponent.boundFn [as delegateMethod] (vue.esm.js?efeb:189)
    at VueComponent.addSeries (eval at <anonymous> (vue-highcharts.js?da61:132), <anonymous>:34:12)
    at VueComponent.boundFn [as addSeries] (vue.esm.js?efeb:190)
    at __WEBPACK_IMPORTED_MODULE_0_vue__.a.nextTick (Monthly.vue?b40e:240)

Any thoughts as to what the culprit might be?

Thanks

[superman66]

you can try this, passing Highcharts instance to vue-highcharts:

vue-highcharts( :options="monthlyOptions" ref="monthlyChart" :highcharts="Highcharts")

and Highcharts should be import and defined in data:

  data() {
    return {
      Highcharts: Highcharts,
    }
  },

[justmark]

When I load regular data, there aren't any errors, but now if I try to add in the "errorbar", I end up with the following error in the console:

vue.esm.js?efeb:584 [Vue tip]: Prop "highcharts" is passed to component <Anonymous>, but the declared prop name is "Highcharts". Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "highcharts" instead of "Highcharts".

I tried switching it to just "highcharts", but the same error appears.

[superman66]

sorry, it my mistake. the prop name should be "Highcharts".

vue-highcharts( :options="monthlyOptions" ref="monthlyChart" :Highcharts="Highcharts")

[justmark]

That did the trick! Thanks for your help.

[philipbreau]

Hi, This appears to break in vue2-highcharts v1.1.9. The latest version I can get it to work with is v1.1.8. Later versions throw Error 17 as above.

The combo of current Highcharts v6.6.1 and vue2-highcharts v1.1.8 work.

Thanks

[superman66]

@philipbreau you can see this demo.In BubbbleChart, it used Highchart-more module.