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

NextJS Superpose Plot StockChart UseState

Hello Everyone,

My intention is to display a stockchart graph and allow the visitors to superpose to it multiple stocks from a checkbox list.
I am quite new, don't hesitate to redirect me to some basic readings if I missed something big.

I am using NextJS and therefore use the HighchartsReact from 'highcharts-react-official'

At the moment, I am able to set the chart options from one to another via a button thanks to useState from react.
Nevertheless I don't see how I would be able to "add one plot on top of the existing plot" via useState. (and similarly when unchecking the box it should be removed)

Could you please give me some guidance or the best way to achieve this task ?
(Note that the serie value will be fetch from api in the future)

Thank you so much
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: NextJS Superpose Plot StockChart UseState

Hello laurent512!

We appreciate you reaching out to us!

Sorry for late response. The most optimal way to add a new point/series looks like that: https://stackblitz.com/edit/react-ft9ddk?file=index.js

I hope that it'll help you. Feel free to ask any further questions. :)

Best regards!
Dominik Chudy
Highcharts Developer
laurent512
Posts: 7
Joined: Mon Mar 01, 2021 7:56 pm

Re: NextJS Superpose Plot StockChart UseState

Hi , thank you for the support.

Would you have any example with the react hooks ?

Including remote fetching of the graphs to be(or not) displayed?

thank you so much !!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: NextJS Superpose Plot StockChart UseState

Hi again!

Sure, we can use useState function to store chart configuration and useEffect function to update chart settings and fetch some data to it.

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

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Stock”