ant-design-charts icon indicating copy to clipboard operation
ant-design-charts copied to clipboard

[Bug]: The state of custom legend item isn't restored when updating the data

Open elitemineral opened this issue 2 months ago • 2 comments

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 / 重现步骤

  1. Click legend item with name Type 1
  2. 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 / 其他

elitemineral avatar Oct 22 '25 12:10 elitemineral

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  Chat with Dosu Join Discord Share on X

dosubot[bot] avatar Oct 22 '25 12:10 dosubot[bot]

参考下这个,或者给 Column 组件配置个随机 key。

https://ant-design-charts.antgroup.com/examples/case/interactions/#memo

lxfu1 avatar Oct 28 '25 12:10 lxfu1