laurent512
Posts: 7
Joined: Mon Mar 01, 2021 7:56 pm

Stock Chart with Next JS

Hello everyone,

I am developing the front end of my website with Next JS.
My intention is to use Highcharts to display specific stocks and allow the visitor to superpose to it any stock from a selection (from a list )
I am quite new, don't hesitate to redirect me to some basic readings if I missed something big.

I started with HighChart react and could set up this example in my own environment without any problems: https://stackblitz.com/edit/react-nwseym?file=index.js

As soon as I added constructorType ('stockchart' as described here https://github.com/highcharts/highcharts-react , it stopped displaying anything.

Do you know why this behaviour is occuring ?

Thank you so much for your support.

PS : attempted to copy paste exactly this one as well https://codesandbox.io/s/moxp4310l8?file=/src/index.js did not produce anything .
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Stock Chart with Next JS

Hello laurent512!

Welcome to our forum and thanks for contacting us with your question!

The reason why it stopped displaying is that you didn't import highstock. In the demo below highstock is imported properly so you can check how it should be done. :-)

Demo:
https://stackblitz.com/edit/react-u9vsyq?file=index.js

Let me know if that was what you were looking for!
Best regards!
Dominik Chudy
Highcharts Developer
laurent512
Posts: 7
Joined: Mon Mar 01, 2021 7:56 pm

Re: Stock Chart with Next JS

I feel so stupid... I did not see anywhere I had to do that !
Thank you so much ^^
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Stock Chart with Next JS

You're welcome! :)

In case of any further questions, feel free to contact us again.
Dominik Chudy
Highcharts Developer
selami21
Posts: 1
Joined: Wed Mar 23, 2022 1:30 pm

Re: Stock Chart with Next JS

dominik.c wrote: Hello laurent512!

Welcome to our forum and thanks for contacting us with your question!

The reason why it stopped displaying is that you didn't import highstock. In the demo below highstock is imported properly so you can check how it should be done. :-)

Demo:
https://stackblitz.com/edit/react-u9vsyq?file=index.js

Let me know if that was what you were looking for!
Best regards!
Hello,

I've run highstock but i cant import stock-tools and price indicator elements with NextJS project.

I got reference from https://codesandbox.io/s/ji8ow but it doesnt work with NextJS.

Any idea or do you have a sample with nextjs for stock-tools module?

KR
Selami
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Stock Chart with Next JS

Hi selami21

Here is an example with NextJS and stock tools:
https://codesandbox.io/s/magical-lovelace-9uihsp

Everything seems to work correctly. You need to remember about including styles required to show stock tools (in the example they are imported in styles/globals.css):

Code: Select all

@import "https://code.highcharts.com/css/stocktools/gui.css";
@import "https://code.highcharts.com/css/annotations/popup.css";
Let me know if it was what you were looking for.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”