usage with useEffect in react

[Daisuke Matsumoto]

Hi, I'm trying create a simple area chart in react highcharts-react-official,

it is like this bellow https://codesandbox.io/s/volumechart-o8nrg.

But this link couldn't reproduce the problem.

The problem is Graph drawing is not stable.

It's mean some time will be success but some time failure.

I checked console.log(props) all times stored correct data.

I think it maybe happen by browser because when I open chrome dev-tool then chart was output correct color and data.

and more also output correct color and data when I click some legends in chart's.

How can I debug this problem?

this was the success.
https://gyazo.com/e02eda013acd34cde8b78086e0ef577c

this was the failure.
https://gyazo.com/7add2f65b9610db550dc922d95ef2e62

The chart changed by select box
this is a sample I clicked select box. It chart Doesn't draw anything
https://gyazo.com/4330f12a6a2c2d9c8bfa496cd5de22fa

but when I clicked some legend, chart will draw contents.
this is a sample movie
https://gyazo.com/3cab5f69316cf4c932e0406ae1f95067
and it data is updated from clicked select box.

It mean data is correct and chart was reloaded.

but only can not output color and data.

other else success example are zoom or shrink browser size.

[piotr.m]

Hi,

I saw that you already asked this question on StackOverflow:
https://stackoverflow.com/questions/646 ... -useeffect

When you have requested support, a given programmer will address the issue immediately--
working with other team members if needed; in the future, please do not duplicate topics on different support channels:
https://www.highcharts.com/blog/support/

Kind Regards

[Daisuke Matsumoto]

OK

[sebastian.h]

Hi Daisuke Matsumoto,

Thanks for understanding

Feel free to contact us if further help needed.

[rishard]

I had a similar problem. The chart worked, but if I clicked on the legend, the chart would collapse. Since using immutable={true} and allowChartUpdate={false} didn't help me, I had to fix the use of UseEffect in my code and the problem was solved.

The way I see it, the consultation on SO did not have accurate answers. Perhaps my advice will help someone. The react-app code is available on the githab.

And is open for criticism.

https://cmirnow.github.io/Open-Exchange ... ct-Wrapper

[jedrzej.r]

Hi!

Thanks for making a contribution to this thread. It would be beneficial for others if you could also provide a URL to the source code or a snippet of the solution, which helped to solve your issue.

In case of any other questions related to Highcharts (or Highcharts React Wrapper), feel free to ask anytime.
Best regards!

[rishard]

No problem, of course. My solution is here.

Incorrect useEffect initiates a collision: the chart works apparently without problems, but clicking on legend ruins everything:

Code: Select all

  useEffect(() => {
    fetch(url, {
      method: "GET",
      headers: {
        accept: "application/json",
      },
    })
      .then((res) => res.json())
      .then((data) => setApiData(data));
  });

Cannot read properties of undefined (reading 'layout')

You must use useEffect correctly. For example:

Code: Select all

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch(url, {
        method: "GET",
        headers: {
          accept: "application/json",
        },
      })
        .then((res) => res.json())
        .then((data) => setApiData(data));

      return data;
    };
    fetchData();
  }, []);

As shown above, this causes no problem.

Note. I was unable to import exporting.js and export-data.js modules into my react-app, my attempt caused the problem described here. Interestingly, a similar import in RoR works without problems. I should mention that this Rails-app also uses Highcharts 11:
https://github.com/cmirnow/exchange-rat ... ge.json#L9

Does anyone know of a solution to importing modules for Highcharts 11 for react-app?

[jedrzej.r]

Thanks for sharing snippets of code depicting correct way for useEffect usage.

Regarding the issue: unfortunately, until a fix is released to the highcharts-react wrapper, there isn't that much you can do besides leaving your feedback on mentioned issue. If it helps you in anyway, you can use some online editor, where the error isn't logged to the console.

Live example: https://stackblitz.com/edit/react-1xufyj?file=index.js

Let me know if you have any further questions!
Best regards!