update issue

[qIsotope]

Hi, I'm trying to do a regression from react-highcharts to react-highcharts-official, and I want to do it correctly.
Please tell me how best to update the chart in my case.

tried to reproduce https://codesandbox.io/s/highcharts-react-demo-forked-r36ydq?file=/demo.jsx

The basic idea is that I get the series from API -> redux -> component, I tried to emulate this with setTimeout, but I'm not sure if it's right. And when I change the seriesTimeInterval, I make a new request to the API.

P.S. with immutable prop it looks correct, but only in this case of codesandbox, in my prod I have more props and I don't need to recreate the chart when changing them, only when changing seriesTimeInterval and series

[Paweł Potaczek]

Hi @qIsotope,

Thank you for contacting us!

Your code looks fine in general, you need to only disable the chart.allowMutatingData option.

chart: {
  ...,
  allowMutatingData: false
}

API Reference: https://api.highcharts.com/highcharts/chart.allowMutatingData

However, you can improve the updating process a bit by keeping chart options in a state and updating only the changed ones.

Live demo: https://codesandbox.io/s/highcharts-react-demo-j9s44p?file=/chart2.jsx
Docs: https://github.com/highcharts/highcharts-react#optimal-way-to-update

Best regards!

[qIsotope]

@ppotaczek thanks a lot for reply!

i see one issue in your demo - https://codesandbox.io/s/highcharts-react-demo-j9s44p?file=/chart2.jsx

on first render i see xAxis label format in "daily" interval like "1 Jun", number of day and a month, when i change it to "weekly" and change again to "daily" i see only a number

[qIsotope]

@ppotaczek moreover it breaks only when you pick "weekly", if pick "monthly" and return 'daily' it will not break

[Paweł Potaczek]

@qIsotope, that's because we need to reset the formatter function:

  xAxis = {
    labels: {
      formatter: null
    },
    ...
  };

Live example: https://codesandbox.io/s/highcharts-react-demo-tpp4t7?file=/chart2.jsx

[qIsotope]

@ppotaczek thanks a lot!

I have another strange problem in just one place in my application with this component that I used in the demo, when I select a lot of data, on the first render with the interval "daily" everything is fine, after I change to weekly or monthly and then back to "daily" some sAxis labels disappear and after I add some data they appear, maybe you know what can help with this.
When I add immutable prop all works as expected...
demo

[Paweł Potaczek]

@qIsotope, Could you reproduce the problem in codesandbox? It seems that there are two updates when you change data.

[qIsotope]

@ppotaczek https://codesandbox.io/s/highcharts-react-demo-forked-r36ydq?file=/demo.jsx here is.
important thing is to increase a width of window with component, component width should be 965px +-, this size in my app, and i add a button rerender to just rerender component,after click on this all xAxis appears
demo.webm

[Paweł Potaczek]

@qIsotope, Maybe you could use functional component and React hooks, as in my provided example? In your example, series and x-axis are updated separately.

[qIsotope]

@ppotaczek i tried but have issue when chart have multiple axes.
example - https://codesandbox.io/s/highcharts-react-demo-forked-klrvkm?file=/chart2.jsx
For reproduce you need press the overall and clean checkboxes and then remove responses, it make area instead line for some reason