scootcho
Posts: 2
Joined: Mon Apr 01, 2019 5:14 am

Stock chart with GUI React working example

Hi,

Would it be possible to provide a working solution for the Stockchart with GUI in react? https://www.highcharts.com/stock/demo/stock-tools-gui

I've been stuck for two days on getting the two pane (candlestick & volume) https://www.highcharts.com/stock/demo/c ... and-volume with the official wrapper. Works fine but the volume chart is overlapping the navigation area.


Image


Thanks in advance
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Stock chart with GUI React working example

Hi scootcho,

Welcome to our forum and thanks for contacting us.
Here you have a demo of Stock Tools in React: https://codesandbox.io/s/10yv629397
And here you have a working demo of the candlestick & volume: https://codesandbox.io/s/moxp4310l8

Can you reproduce an online demo with your errors?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
scootcho
Posts: 2
Joined: Mon Apr 01, 2019 5:14 am

Re: Stock chart with GUI React working example

Hi Rafal,

Thank you for the reply, it works flawlessly when I copied your code into my local environment. However, the navigation still overlaps if I try to fetch the data from a remote source. I'm using react hook to fetch external data. Could it be how the new data is re-rendered/updated in Highchart?

Here is my code. You'll have to hit the "zoom" buttons 1m, 3m, 6m, YTD, etc., to see the overlapping navigation area.

https://codesandbox.io/s/l7lojmxzrq

Thanks for your help!
rafalS
Posts: 2660
Joined: Thu Jun 14, 2018 11:40 am

Re: Stock chart with GUI React working example

Well,

There is clearly something wrong with the way you try to update/insert your data.
Your chart has worked fine as soon as I inserted the data manually: https://codesandbox.io/s/n77myl1mq4

If you still have any issues or questions about your chart in React, please let me know and ask a specific question - I will forward it to our React developer.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
sajjadakhtar
Posts: 1
Joined: Mon Aug 21, 2023 11:01 am

Re: Stock chart with GUI React working example

Why Toolbar is not showing
jedrzej.r
Posts: 712
Joined: Tue Jan 24, 2023 11:21 am

Re: Stock chart with GUI React working example

Hi!

Welcome to our forum and thanks for getting in touch with us!

Could you elaborate a little bit more about which Toolbar are you referring to? After opening demo posted by RafalS, everything seems to work correctly. Perhaps you could share your config, so that I can reproduce this issue and find a solution to this problem? You can start by editing above demo or simply copy-paste your chart configuration.

I'm wating for your reply!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Stock”