[Bug]: 使用自定义图例，图例过多，换行之后混覆盖图表。貌似也无法分页

[tomatodev]

Describe the bug / 问题描述

color: { render: (items: { color: string; label: string; id: string }[]) => { return ( <div className="custom-legend" style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', }} > {items.map((item) => { console.log( '%c [ item ]-1298', 'font-size:13px; background:pink; color:#bf2c9f;', item ); return ( <div key={${item.id}-${item.color}} className="custom-legend-item" // eslint-disable-next-line react/no-unknown-property legend-value={item.id} style={{ display: 'inline-flex', alignItems: 'center', flexWrap: 'nowrap', }} > <div className="legend-color" style={{ background: item.color, width: 8, height: 8, marginRight: 8 }} /> <div className="legend-label" style={{ paddingRight: 4 }}> {item.label} </div> <Tooltip title="prompt text"> <Icon value="help" /> </Tooltip> </div> // <span key={item.id} style={{ color: item.color }} legend-value={item.id}> // {item.label} // </span> ); })} </div> ); }, },

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

🆕 2.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[dosubot]

Hi @tomatodev! I'm Dosu and I’m helping the ant-design-charts team.

这个问题的根本原因是：ant-design-charts 在使用自定义图例（比如通过 color.render 返回一个 flex 容器）时，图表容器不会自动为图例动态高度预留空间，导致图例内容换行后会覆盖在图表区域上。框架本身没有内置的布局管理或 API 能让图表自动响应自定义图例的高度变化，也没有相关配置项能解决这个问题（详见源码分析）。

解决思路：

• 推荐将自定义图例渲染在图表容器外部（比如和图表并列的 div），并通过 CSS 或父级布局手动为图例预留足够的空间（如设置 margin-bottom 或调整容器高度），确保图例不会覆盖图表。
• 如果必须将图例渲染在图表内部，可以在外层容器（比如 chart 的父 div）动态计算图例高度，然后用 padding 或 margin 把图表内容往下“推”，避免重叠。
• 目前没有官方的自动适配方案，所有自定义 legend 的布局都需要开发者自己管理。

相关社区讨论和源码都说明了这个限制，建议参考类似案例将 legend 独立出来并用 React 管理状态和布局。如果需要进一步自适应，可以用 ref 获取 legend 高度，动态调整 chart 容器样式。

如需代码示例或具体实现方案可以补充说明。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[lxfu1]

用 markdown 语法提供一下复现。
```ts
code
```

[moayuisuda]

html render 不在图表 canvas 自适应布局流中，自适应高度用 ResizeObserver 获取高度设置 insetTop

[moayuisuda]

另外这都已经是 html 了，你完全可以就限制一行，然后超出滚动/分页

[tomatodev]

color: {
                render: (items: { color: string; label: string; id: string }[]) => {
                    return (
                        <div
                            className="custom-legend"
                            style={{
                                display: 'flex',
                                gap: '10px',
                                flexWrap: 'wrap',
                            }}
                        >
                            {items.map((item) => {
                                console.log(
                                    '%c [ item ]-1298',
                                    'font-size:13px; background:pink; color:#bf2c9f;',
                                    item
                                );
                                return (
                                    <div
                                        key={`${item.id}-${item.color}`}
                                        className="custom-legend-item"
                                        // eslint-disable-next-line react/no-unknown-property
                                        legend-value={item.id}
                                        style={{
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            flexWrap: 'nowrap',
                                        }}
                                    >
                                        <div
                                            className="legend-color"
                                            style={{ background: item.color, width: 8, height: 8, marginRight: 8 }}
                                        />
                                        <div className="legend-label" style={{ paddingRight: 4 }}>
                                            {item.label}
                                        </div>
                                        <Tooltip title="prompt text">
                                            <Icon value="help" />
                                        </Tooltip>
                                    </div>
                                    // <span key={item.id} style={{ color: item.color }} legend-value={item.id}>
                                    //     {item.label}
                                    // </span>
                                );
                            })}
                        </div>
                    );
                },
            },

[tomatodev]

另外这都已经是 html 了，你完全可以就限制一行，然后超出滚动/分页

你好，请问团队后续会对目前这个问题作出优化吗？还是保持现状？如果是保持现状的话，像您说的超出滚动/分页，这个滚动/分页可以使用组件库现有的分页功能实现吗？还是说需要自己实现分页功能？。如果可以使用组件库的分页功能，能否提供一下大概实现思路