ant-design-charts
ant-design-charts copied to clipboard
[Bug]: Incorrect Tooltip Data on Initial Render for Grouped Column Chart with Scrollbar
Describe the bug / 问题描述
When using a grouped column chart (isGroup: true) with a scrollbar (scrollbar: { type: 'horizontal', ratio: 0.3 }), the tooltip shows incorrect data on initial render.
On first load:
- Hovering over the 4th column of the 1st group shows the tooltip for a column in the 2nd group instead.
- However, after scrolling the chart slightly, the tooltip behavior corrects itself and displays accurate values.
This seems like a render sync or layout issue that affects the hover hitboxes before any user interaction with the scrollbar.
Note: The highlight background is not cover the group column too
const DemoColumn = () => {
const config = {
data: {
type: 'fetch',
value: 'https://gw.alipayobjects.com/os/antfincdn/iPY8JFnxdb/dodge-padding.json',
},
xField: '月份',
yField: '月均降雨量',
colorField: 'name',
group: true,
style: {
// 矩形四个方向的内边距
inset: 5,
// 矩形单个方向的内边距
// insetLeft:5,
// insetRight:20,
// insetBottom:10
// insetTop:10
},
scrollbar: {
x: {
ratio: 0.2,
},
},
};
return <Column {...config} />;
};
https://github.com/user-attachments/assets/6ad9e4c0-42e1-42e6-bfa8-dd44d1511c50
Reproduction link / 复现链接
No response
Steps to Reproduce the Bug or Issue / 重现步骤
No response
Version / 版本
🆕 2.x
OS / 操作系统
- [x] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他
Browser / 浏览器
- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他