How can I reload chart following data update?

Question

I have a page with a dropdown menu, where I can select an option (data source) and load a couple charts. After that, if I select other data source charts should update as well.

When I select other data source chart is not updating. I know my variable is updating properly, also that my chart call is using this same variable.

Here a the main module

function Content() {
  const [chartData, setChartData] = useState(
    mockData.map(series => ({
      ...series,
      data: series.data.map(point => {
        const dateArr = point[0].split("-");
        return [Date.UTC(dateArr[0], dateArr[1], dateArr[2]), point[1] * 100];
      })
    }))
  );
  const handleSelectedOptionChange = evt => {
    const selectedOption = evt.target.value;
    if (selectedOption === 1) {
      setChartData(() => {
        mockData.map(series => ({
          ...series,
          data: series.data.map(point => {
            const dateArr = point[0].split("-");
            return [
              Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
              point[1] * 100
            ];
          })
        }));
      });
    }
    if (selectedOption === 2) {
      setChartData(() => {
        mockData2.map(series => ({
          ...series,
          data: series.data.map(point => {
            const dateArr = point[0].split("-");
            return [
              Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
              point[1] * 100
            ];
          })
        }));
      });
    }
  };
  return (
    <>
      <FormControl>
        <InputLabel htmlFor="grouped-native-select">Choose</InputLabel>
        <Select
          id="selector"
          name="selector"
          onChange={handleSelectedOptionChange}
          defaultValue={1}
        >
          <option value={1}>First</option>
          <option value={2}>Second</option>
        </Select>
      </FormControl>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart data={chartData} />
        </Paper>
      </Grid>
    </>
  );
}

This is a "working" demo

I've checked this question, my HighchartsReact is already set with allowChartUpdate.

Also I've checked this question, there are some solutions there. But I couldn't implement any of those. Because all of them acces the chart via JQuery and I don't know an alternative for the react case.

And this forum post I face the same problem as the above, it's a JQuery method call.

Appreciate any help.

Hi Bernardo if my answer helped you, can you please mark it as accepted? Thanks :) — rzwnahmd, Apr 15 '20 at 18:02
I'm implementing your suggestion to my real component, it's a little bit more complex (parameterized). As soon as I get it working I'll mark it as accepted, just in case I have any follow up question or if anybody proposes a different approach. — Bernardo Marques, Apr 15 '20 at 18:47

score 2 · Accepted Answer · answered Apr 15 '20 at 17:46

Hey the problem is that you're trying to sync your props with your CustomGUIChart component's state and then rendering UI based on that state. Now the problem with this is that since the constructor runs only the first time the props are set to state and chart is rendered correctly, but when the props changes there's no way for your state to know that so chart doesn't change.

Now to solve this we can use getDerivedStateFromProps life-cycle method but instead of that a better solution is to not sync your state with your props unless you really have to. Just use your props in the render method.

Here's your code, working as expected: https://codesandbox.io/s/update-data-source-8g27i?file=/src/CustomGUIChart.js

I've made your CustomGUIChart component really simpler now, you can even make it a functional component

Hope it helps :)

How can I reload chart following data update?

1 Answers1