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

[Bug]: Incorrect Tooltip Data on Initial Render for Grouped Column Chart with Scrollbar

Open lnvtphu opened this issue 7 months ago • 0 comments

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 / 其他

lnvtphu avatar Mar 22 '25 04:03 lnvtphu