vue composition api problems

[mls535]

I'm experiencing the following issue: when using Highcharts with Vue, using your library, I'm encountering errors while trying to create stock charts. I'm getting the following error:

TypeError: Cannot read properties of undefined (reading 'Core/Axis/Stacking/StackItem.js').

This is my code:

https://codesandbox.io/s/shy-sun-h77w42 ... rc/main.js

How can I use StockCharts with your Highcharts-Vue library? I also had problems of using directly highcharts <highcharts class="chart" :options="chartOptions" :updateArgs="updateArgs"></highcharts> That's why i use Charts. My project uses composition api with typescript.

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

1. The link you've sent does not include any Highcharts-related code and has no charts.

2. Composition API was introduced in [email protected] and works well from the latest 1.4.2 version which you find on our GitHub: https://github.com/highcharts/highchart ... ree/v1.4.2
In codesandbox you have version 1.4.0 installed where Composition API is not supported.

3. If you clone the master branch of the highcharts-vue repository and run the demo-v3 you'll notice how you can create charts with Highcharts and Composition API.
Here you have the code: https://github.com/highcharts/highchart ... ionApi.vue
Here's a simple example online of using Highcharts-Vue with Compositon API: https://codesandbox.io/s/cool-shannon-qvrir6

Please let me know if that helps and if not try to reproduce the issue you're encountering & send me a link here/on highcharts-vue repository so that I could take a closer look at why this happens.

Best regards!

[mls535]

Hi,

Welcome to our forum & thanks for the question!

1. The link you've sent does not include any Highcharts-related code and has no charts.

2. Composition API was introduced in [email protected] and works well from the latest 1.4.2 version which you find on our GitHub: https://github.com/highcharts/highchart ... ree/v1.4.2
In codesandbox you have version 1.4.0 installed where Composition API is not supported.

3. If you clone the master branch of the highcharts-vue repository and run the demo-v3 you'll notice how you can create charts with Highcharts and Composition API.
Here you have the code: https://github.com/highcharts/highchart ... ionApi.vue
Here's a simple example online of using Highcharts-Vue with Compositon API: https://codesandbox.io/s/cool-pine-9juffp

Please let me know if that helps and if not try to reproduce the issue you're encountering & send me a link here/on highcharts-vue repository so that I could take a closer look at why this happens.

Best regards!

Hi! And thank you for your quick reply! Sorry, I thought I was sending it correctly. This is an example of how I'm using Stock, and with this code, it gives me the error I told you.
Check this link:
https://codesandbox.io/s/twilight-water ... oWorld.vue
I have added the Stock problem in HelloWorld. And I have also added a working chart file, but without doing it like you do it in your guides, this was the only way it worked for me to get your generic charts. But now I want to use your Stock charts...

This example you sent me isn't working...

Here's a simple online example of using Highcharts-Vue with Composition API: https://codesandbox.io/s/cool-pine-9juffp

Also, I'm not able to use <highcharts class="chart" :options="chartOptions" :updateArgs="updateArgs"></highcharts> as you would be able to see in my example of WorkingChart.vue that I'm using directly Chart.

[jakub.s]

Hi,

This link works, thanks!

I've made a few small changes and everything seems to work as expected: https://codesandbox.io/s/great-tess-v0r2w7

I'm not sure why you've imported Highstock from /es-modules/masters/highstock.src. If you import stockInit from modules/stock it should work fine.

You have an example of initializing Highstock or Highmaps in readme here: https://github.com/highcharts/highchart ... ganttchart

Let me know if that works for you.

Best regards!

[mls535]

Hi,

This link works, thanks!

I've made a few small changes and everything seems to work as expected: https://codesandbox.io/s/great-tess-v0r2w7

I'm not sure why you've imported Highstock from /es-modules/masters/highstock.src. If you import stockInit from modules/stock it should work fine.

You have an example of initializing Highstock or Highmaps in readme here: https://github.com/highcharts/highchart ... ganttchart

Let me know if that works for you.

Best regards!

Sorry to bother you, I'm having some issues if I add in my main.ts HighchartsVue. The following error appears:

Argument of type '(vue: typeof import("e:/www/myproject/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to parameter of type 'Plugin_2'.
Type '(vue: typeof import("e:/www/myproject/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type 'PluginInstallFunction & { install?: PluginInstallFunction | undefined; }'.
Type '(vue: typeof import("e:/www/myproject/node_modules/vue/dist/vue"), options?: ChartOptions | undefined) => void' is not assignable to type 'PluginInstallFunction'.
Types of parameters 'vue' and 'app' are incompatible.
Type 'App<any>' is missing the following properties from type 'typeof import("e:/www/myproject/node_modules/vue/dist/vue")': compile, defineCustomElement, useCssModule, u

Also, as I told you I'm not able to manage to do it like you are sending it to me...
I'm using:
"vue": "^3.2.37", this are the dependencies of "highcharts": "^11.0.1",
"highcharts-vue": "^1.4.2","typescript": "^5.0.4",
This is the code I use to work normal charts: https://codepen.io/maitels/pen/wvQwpOB you can added to the sandbox and check it (sandbox didn't save this part of the code and I've being trying to send it to you several times), as I told you, If I do it with this component: <highcharts :constructorType="'stockChart'" class="hc" :options="chartOptions" ref="chart"></highcharts> it doesn't appear or work.... But if I do it with {Chart} it works with normal components. The issue is that I need to use stock. And I just want to make a little ball of wool and cry because it doesn't work.
My main.ts: import '@vuepic/vue-datepicker/dist/main.css'
import axios from 'axios'
import { createPinia } from 'pinia'
import { createApp } from 'vue'

import HighchartsVue from "highcharts-vue";

stockInit(Highcharts);

import App from './App.vue'
import router from './router'


const pinia = createPinia()

customYupMethods();
const app = createApp(App)
app.use(pinia)
app.use(router)
app.use(HighchartsVue);
app.mount('#app')

[jakub.s]

Hi,

1. I'm sorry but I do not fully understand the problem. It does not change anything whether you use import { Chart } from 'highcharts-vue' or the highcharts component registered by highcharts-vue. Could you please try to explain to me why this: https://codesandbox.io/s/sleepy-artem-e6cv9l solution (or the previous ones) do not fit your requirements?

Highcharts component is exactly the same thing as the Chart component so it should not really make a difference.

2. Unfortunately, this plugin does not offer full TypeScript support yet, but we're working on it. Feel free to create an issue for this: https://github.com/highcharts/highcharts-vue/issues/new

I'll prioritize it and solve it before the next release. For now you could try something with asserting a HighchartsVue as any: https://stackoverflow.com/questions/425 ... pt-snippet

Kind regards!

[mls535]

Hi,

1. I'm sorry but I do not fully understand the problem. It does not change anything whether you use import { Chart } from 'highcharts-vue' or the highcharts component registered by highcharts-vue. Could you please try to explain to me why this: https://codesandbox.io/s/sleepy-artem-e6cv9l solution (or the previous ones) do not fit your requirements?

Highcharts component is exactly the same thing as the Chart component so it should not really make a difference.

2. Unfortunately, this plugin does not offer full TypeScript support yet, but we're working on it. Feel free to create an issue for this: https://github.com/highcharts/highcharts-vue/issues/new

I'll prioritize it and solve it before the next release. For now you could try something with asserting a HighchartsVue as any: https://stackoverflow.com/questions/425 ... pt-snippet

Kind regards!

Answering to your points:

1. https://codesandbox.io/s/sleepy-artem-e6cv9l this solution finally worked
2. I think that the basic problem is that I'm using typescript and it's giving me the error I showed you before and that's why I have to use:

Code: Select all

import { Chart } from 'highcharts-vue'; 

Instead of

Code: Select all

<highcharts :options="chartOptions"></highcharts>

Thank you very much! Have a nice day!