How do I separately render two Line graphs in one canvas using React Chart.js to make use of the useMemo-Hook?

Question

I'm having trouble with a graph I'm building with React-ChartJS-2:

I've got two line charts in one canvas, one of them is interactive (the user can activate points and can compare different values on that graph) the other one is just a static graph which should be a orientation for the user. I'm trying to prevent the rerendering of the static graph if the user activates datapoints on the interactive graph (which changes the props and thus the useMemo Hook doesnt work). Is there a way to separate the two datasets in two single components so the props don't change for the static graph without some hacky CSS?

Thank you in advance!

I kinda found a solution by deactivating the animation so the user doesn't see the rerendering, but it's not the nicest I guess. Right now I'm trying to render the two line Charts and try to stack one on top of the other with CSS

Answer 1

Hi There @Lucas2101 it would be easier to answer your question with a code example. What is the reason you need the useMemo hook. And to answer one of your questions the useMemo hook runs when the items in the dependency array update so it might be that you haven't added the correct thing to that array. I can't say for sure as i have no code.