fix(tooltip): show error data if dataset if large

README.md

@@ -70,11 +70,11 @@ const chart = new Chart({
 
 // Specify visualization.
 chart
-  .interval()                   // Create an interval mark and add it to the chart.
-  .data(data)                   // Bind data for this mark.
-  .encode('x', 'genre')         // Assign genre column to x position channel.
-  .encode('y', 'sold')          // Assign sold column to y position channel.
-  .encode('color', 'genre');    // Assign genre column to color channel.
+  .interval() // Create an interval mark and add it to the chart.
+  .data(data) // Bind data for this mark.
+  .encode('x', 'genre') // Assign genre column to x position channel.
+  .encode('y', 'sold') // Assign sold column to y position channel.
+  .encode('color', 'genre'); // Assign genre column to color channel.
 
 // Render visualization.
 chart.render();

src/interaction/tooltip.ts

@@ -854,10 +854,17 @@ export function seriesTooltip(
         });
       }
 
+      // X in focus may related multiple points when dataset is large,
+      // so we need to find the first x to show tooltip.
+      const firstX = filteredSeriesData[0]?.[0].x;
+      const transformedX = firstX ?? abstractX(focus);
+
       emitter.emit('tooltip:show', {
         ...event,
         nativeEvent: true,
-        data: { data: { x: invert(scale.x, abstractX(focus), true) } },
+        data: {
+          data: { x: invert(scale.x, transformedX, true) },
+        },
       });
     },
     wait,