Description
Hi, currently, I have a chart to visualize Canadian immigration data, and users can filter data by date and data type (series in VChart). https://runiu.vercel.app
CleanShot.2024-04-05.at.13.37.29.mp4
Problem
In the previous video:
- The default legend is set to
["General"]. - After selecting additional legend entries, proceed to filter by Date Range or Data Type (Series).
- The selected legend entries will become the default legend
["General"]again as specified in the specification:legends: { defaultSelected: ["General"] }.
I would like VChart to remember the legend entries (without resetting them) after I apply Date Range or Data Type filters. Unfortunately, my current code did not accomplish this.
For my current code, I believe this problem is expected because in the code, I filter the data outside of VChart and pass it to spec to the VChart component, causing a re-render in React. The re-rendered VChart will receive legends: { defaultSelected: ["General"] } again, setting the legend to only General. (Plz correct me if I'm wrong)
How to reproduce
Github repo: https://github.com/Crayon-ShinChan/runiu
You can reproduce this by cloning the repo and following README.md
What I've tried to fix the problem
Well, I tried to declare a state in React called defaultLegend to "memorize" previous legends. the commit is here: https://github.com/Crayon-ShinChan/runiu/commit/fcab0fe0da1992f7fefb934bffbfa6a32d9370d5
Every time I click on the legend, the chart appears to rerender constantly, what was shown in previous video. This is not the desired behavior.
CleanShot.2024-04-05.at.13.36.33.mp4
Github repo (fix/reset-legend branch): https://github.com/Crayon-ShinChan/runiu/tree/fix/reset-legend
Expected Behavior
I would like VChart to remember the legend entries (without resetting them) after I apply Date Range or Data Type filters. . But the chart shouldn't rerender every time when selecting a new legend entry.
Does anyone know what's the best practice to accomplish this?