Stock chart with GUI React working example

[scootcho]

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.





Thanks in advance

[rafalS]

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!

[scootcho]

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]

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!

[sajjadakhtar]

Why Toolbar is not showing

[jedrzej.r]

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!