search

highcharts / highcharts-vue

Other
686 stars 150 forks source link

How to import class to component #225

Closed ajmoralesa closed 1 year ago

ajmoralesa commented 1 year ago

I'm having issues when it comes to importing the Annotation class to a component using Vue3. I attempt to reproduce this example using highcharts-vue.

Here is a reproducible example. When I manually copy/paste the import { Annotation } from 'highcharts';, the Annotation suddenly appears in the graph with the drag functionality.

What am I doing wrong in the Annotation class import? I have also trid to import it globally, without success.

Thanks in advance for any feedback.

jszuminski commented 1 year ago

Hi,

Sorry for the late response & thanks for reporting!

The issue stems from the fact that you cannot import Highcharts classes by simply running import { Annotation } from 'highcharts'. By running this command you're looking for non-default exports from the 'highcharts' node module.

If you carefully follow the example that you're trying to reproduce and import Highcharts (which is a default export) and then take the annotation as Highcharts.Annotation (or you can destructure Highcharts with const { Annotation } = Highcharts;) everything seems to work. Here's a demo: https://stackblitz.com/edit/vitejs-vite-snbj9a?file=src%2Fcomponents%2Fchart.vue

Closing as it is not a bug.