efenadir
Posts: 31
Joined: Sat Jul 10, 2021 6:32 pm

Send chart object when chart is updated [React]

Hello,

I want to send chart object which refers to ref (useRef) in React to my server ONLY WHEN chart is updated. What I mean for updated is when user add an annotation, label or add technical indicator to the chart (I am using Stock Chart with GUI).

I send you a demo, but probably will not help you a lot unfortunately :) https://codesandbox.io/s/data-grouping- ... :2554-2673

I want the same functionality that useEffect does with the dependency array. Whenever the chart object is changed, I want to do something. Because for efficiency reasons, I do not want to send request regularly to my server if the chart does not change by the user.

Code: Select all

 useEffect(() => {
    Some data transfering to server etc.
    console.log("Chart is updated");
  }, [chart]);
  
  ..
  ..
  ..
  
  <HighchartsReact
              ref={chart}
              ..
              ..
            />
I hope I could explain the issue to you well.

Thanks for your consideration!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Send chart object when chart is updated [React]

Hello efenadir!

We appreciate you reaching out to us!

I found an interesting topic on our GitHub that could be quite useful for you. Check it out: https://github.com/highcharts/highchart ... issues/267

Also another one from our forum: viewtopic.php?t=43606

Best regards!
Dominik Chudy
Highcharts Developer
efenadir
Posts: 31
Joined: Sat Jul 10, 2021 6:32 pm

Re: Send chart object when chart is updated [React]

Hi Dominik,

Thank you for your answer. I made a brief research on my problem. It would be great if we can do with a chart event solution instead of an useEffect or a Reactive way solution.

What I am looking for something very similar to redraw() callback function: https://api.highcharts.com/highstock/ch ... nts.redraw

With redraw() callback function, I can solve one of my needs.(When user add, edit, remove an indicator chart, the callback function invokes.- In my case I want to send chart object to server.) But still it is not enough because it does not invoke when an annotation added to chart. I tried to solve that problem with afterUpdate() function: https://api.highcharts.com/highstock/na ... fterUpdate

But in that case, it invokes only when an annotation added to chart in that session, what I mean is: When you add an annotation manually in the code (like a default annotation), and user edit or remove the annotation, the afterUpdate(), remove() or add() callback functions do not invoke.

What I think is, can we create a custom event that in order to satisfy my needs: https://api.highcharts.com/class-refere ... ent%3CT%3E

Or if there is a another event related solution, it would be perfect! I am drifting in this problem for couple of days.

Please let me know if you want to me clarify anything.

Best regards.
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Send chart object when chart is updated [React]

Hi again!

Unfortunately, it's hard to find an event that will meet your expectations. Chart.redraw is called too often to use it, so I would suggest using wraps on some specific methods after which you would like to save your options. Here you've got an example demo: https://jsfiddle.net/BlackLabel/fsa0mcxy/

And docs: https://www.highcharts.com/docs/extendi ... highcharts

What's more, here you've got an interesting thread about saving chart options: https://stackoverflow.com/questions/549 ... indicators

And here's a piece of code that shows how Highcharts save annotations/indicators in the local storage: https://github.com/highcharts/highchart ... s.ts#L2472

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Stock”