Repository: antvis/G2 (2025-07-08T11:34:22Z)

Issue:
[Bug]: g2最新版本折线图，x轴横坐标只有两个并且数据缺失时，tooltip展示的图例颜色顺序错乱
### Describe the bug / 问题描述

以下是data，删除注释的一条数据后，tooltip展示的图例颜色不对，并且只有在x轴只有两个值时才会发生（例如eg中x轴横坐标为 '10:10','10:20'，假如有更多个时不会有这种问题）

![Image](https://github.com/user-attachments/assets/7af7c40a-31b0-444a-91d6-eeec6546823c)

![Image](https://github.com/user-attachments/assets/07b3c072-ad8a-4662-8ca4-d158f572c223)

const data = [
  { time: '10:10', call: 10, value: 2,name:"people" },
  { time: '10:20', call: 10, value: 7,name:"people" },
  // { time: '10:10', call: 10, value: 3,name:"mock" },
  { time: '10:20', call: 10, value: 5,name:"mock" },
  { time: '10:10', call: 10, value: 10,name:"call" },
  { time: '10:20', call: 10, value: 10,name:"call" },
  ];

### Reproduction link / 复现链接

https://codesandbox.io/p/sandbox/wh6y9r

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

复现链接即可重现


### Version / 版本

🆕 5.x

### OS / 操作系统

- [x] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他


Discussion:
<img width="1312" alt="Image" src="https://github.com/user-attachments/assets/02aa93c9-1f5e-4ff7-a0a3-33c5109f325a" />
简单 debug 了一下，应该是 groupItems 函数的处理导致了颜色发生了变化。
目前看来是折线图在特殊情况下的拾取问题，待排查
> 目前看来是折线图在特殊情况下的拾取问题，待排查

问题已找到，是因为按照索引值来查询 element 导致。element 的数据因为缺失无法和 data 一一对应，但是还是按照索引值去查找，导致 element 匹配错误，所以颜色错误。

<img width="734" alt="Image" src="https://github.com/user-attachments/assets/0aae3c12-0ff4-44de-aeed-422994882924" />
elements数组长度为3，data长度为2导致了不匹配，要解决颜色的问题，不取索引，拿data里的key去做匹配应该可以解决。
但是折线图单点情况下的tooltip拾取看起来不太符合预期，鼠标在图表左侧的时候tooltip拾取到了最右边的单点，感觉这也是个问题。
> elements数组长度为3，data长度为2导致了不匹配，要解决颜色的问题，不取索引，拿data里的key去做匹配应该可以解决。 但是折线图单点情况下的tooltip拾取看起来不太符合预期，鼠标在图表左侧的时候tooltip拾取到了最右边的单点，感觉这也是个问题。

这个问题和 seriesTootip 的拾取有关，和 https://github.com/antvis/G2/pull/6708 有关，我结合一起 debug 一下。
> > elements数组长度为3，data长度为2导致了不匹配，要解决颜色的问题，不取索引，拿data里的key去做匹配应该可以解决。 但是折线图单点情况下的tooltip拾取看起来不太符合预期，鼠标在图表左侧的时候tooltip拾取到了最右边的单点，感觉这也是个问题。
> 
> 这个问题和 seriesTootip 的拾取有关，和 [#6708](https://github.com/antvis/G2/pull/6708) 有关，我结合一起 debug 一下。

这个问题已经修复了嘛？我看复现链接上还是不行
> > > elements数组长度为3，data长度为2导致了不匹配，要解决颜色的问题，不取索引，拿data里的key去做匹配应该可以解决。 但是折线图单点情况下的tooltip拾取看起来不太符合预期，鼠标在图表左侧的时候tooltip拾取到了最右边的单点，感觉这也是个问题。
> > 
> > 这个问题和 seriesTootip 的拾取有关，和 [#6708](https://github.com/antvis/G2/pull/6708) 有关，我结合一起 debug 一下。
> 
> 这个问题已经修复了嘛？我看复现链接上还是不行

这个逻辑修复较为困难，tooltip 耦合性较强，当时修复方法不是最合理的，会对其他模块有影响，可能还需要再探讨探讨。



Patch:
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
index 50c8bffccb9..7faf9f50df3 100644
--- a/src/interaction/tooltip.ts
+++ b/src/interaction/tooltip.ts
@@ -235,7 +235,9 @@ function groupItems(
   ).filter(defined);
   const newItems = data
     .flatMap((datum, i) => {
-      const element = elements[i];
+      // Fix: Get the corresponding element from datum instead of using index i
+      // When data and elements don't correspond one-to-one, using index will cause color errors
+      const element = datum.element || elements[i];
       const { items = [], title } = datum;
       const definedItems = items.filter(defined);
 


Test patch:
diff --git a/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html b/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
index 0cf6d98609a..fc35dcbc998 100644
--- a/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
+++ b/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
@@ -5,7 +5,7 @@
   <ul class="g2-tooltip-list" style="margin: 0px; list-style-type: none; padding: 0px;">
     <li class="g2-tooltip-list-item" data-index="0" style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;">
       <span class="g2-tooltip-list-item-name" style="display: flex; align-items: center; max-width: 216px;">
-        <span class="g2-tooltip-list-item-marker" style="background: rgb(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"/>
+        <span class="g2-tooltip-list-item-marker" style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"/>
         <span class="g2-tooltip-list-item-name-label" style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="number">
           number
         </span>
@@ -16,7 +16,7 @@
     </li>
     <li class="g2-tooltip-list-item" data-index="1" style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;">
       <span class="g2-tooltip-list-item-name" style="display: flex; align-items: center; max-width: 216px;">
-        <span class="g2-tooltip-list-item-marker" style="background: rgb(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"/>
+        <span class="g2-tooltip-list-item-marker" style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"/>
         <span class="g2-tooltip-list-item-name-label" style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="province">
           province
         </span>
@@ -27,7 +27,7 @@
     </li>
     <li class="g2-tooltip-list-item" data-index="2" style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;">
       <span class="g2-tooltip-list-item-name" style="display: flex; align-items: center; max-width: 216px;">
-        <span class="g2-tooltip-list-item-marker" style="background: rgb(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"/>
+        <span class="g2-tooltip-list-item-marker" style="background: rgb(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"/>
         <span class="g2-tooltip-list-item-name-label" style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" title="sub_type">
           sub_type
         </span>