[Bug]: The state of custom legend item isn't restored when updating the data
Describe the bug / 问题描述
The state of custom legend item isn't restored when updating the data.
Reproduction link / 复现链接
https://codesandbox.io/p/sandbox/compassionate-mcclintock-ytxnsk
Steps to Reproduce the Bug or Issue / 重现步骤
- Click legend item with name Type 1
- Click Update Data button.
Expected behavior
legend item with name Type 1 is active (colored) or it should stay disabled but blue column should be hidden.
Actual behavior
legend item with name Type 1 is disabled (gray) but blue column is visible.
Version / 版本
@ant-design/charts - 1.4.2 @ant-design/plots - 1.2.6
OS / 操作系统
- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他
Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他
Hi @elitemineral! I'm Dosu and I’m helping the ant-design-charts team.
This is a known limitation in ant-design-charts 1.x: the internal logic does not preserve the state of custom legend items when you update the data. The chart's update and changeData methods do not track or restore legend state, so any user interaction with custom legends is lost after a data update. This behavior is confirmed by both the codebase and related issues.
A common workaround is to manage the legend state externally in your React component and reapply it after updating the data. Some users have also found that wrapping the chart component in useMemo helps avoid unnecessary updates and can restore expected legend behavior in certain cases (example & discussion). For more advanced control, you can use refs to the underlying chart instance and programmatically set legend state after data changes (example).
There is no built-in fix for this in 1.x, so external state management or memoization is currently the best approach.
To reply, just mention @dosu.
How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other
参考下这个,或者给 Column 组件配置个随机 key。
https://ant-design-charts.antgroup.com/examples/case/interactions/#memo