auspicious_venom
Posts: 7
Joined: Tue Jan 02, 2024 10:31 am

How to add multiple point into a stockchart?

Hey,
I am trying to create a stockchart. In here i am fetching some new past historical data of stocks when user reaches the end of the current data. But issue here is how i can add multiple point at the same time? And that too in the start and do not rerender chart while doing that. I am using React.
kamil
Posts: 124
Joined: Mon Mar 04, 2024 8:26 pm

Re: How to add multiple point into a stockchart?

Hi there,
Thank you for reaching out to us!

In order to add multiple points at once without redrawing them, use series.addPoint function with redraw argument set to false.
API reference: https://api.highcharts.com/class-refere ... s#addPoint

The series are stored in chart.series property. Our official react wrapper docs explain how to get the chart instance: https://github.com/highcharts/highchart ... t-instance

After all points are added, you should manually call chart.redraw().

Please let us know if you have any further questions.
Best regards!
Kamil Kulig
Highcharts Developer
auspicious_venom
Posts: 7
Joined: Tue Jan 02, 2024 10:31 am

Re: How to add multiple point into a stockchart?

Thanks for the reply.
But i have some other issues. I am actually trying to fetch data from backend when user reaches the end of the currently available data. Also, I need to add data to the start not the end as this data fetched now is of the past. Can you tell me the standard way of fetching past data based on current data? And also how i can add multiple points to the chart without re-rendering the chart?
kamil
Posts: 124
Joined: Mon Mar 04, 2024 8:26 pm

Re: How to add multiple point into a stockchart?

I need to add data to the start not the end as this data fetched now is of the past
Have you tried setting shift argument to true while using addPoint function?
https://api.highcharts.com/class-refere ... s#addPoint


Can you tell me the standard way of fetching past data based on current data?
It depends on how your dataset endpoint works. But generally I'd recommend using standard JS promise handling mechanism. It looks like this:

Code: Select all

const data = await fetch(
        'https://demo-live-data.highcharts.com/aapl-ohlcv.json'
    ).then(response => response.json());
// here you can parse the data and update the chart
Kamil Kulig
Highcharts Developer

Return to “Highcharts Stock”