fix: align tooltips by x coordinate

Author: JavaZeroo

src/components/ChartContainer.jsx

@@ -291,7 +291,7 @@ export default function ChartContainer({
     animations: { colors: false, x: false, y: false },
     hover: { animationDuration: 0 },
     responsiveAnimationDuration: 0,
-    interaction: { mode: 'index', intersect: false },
+    interaction: { mode: 'x', intersect: false },
     plugins: {
       zoom: {
         pan: {
@@ -340,7 +340,7 @@ export default function ChartContainer({
         }
       },
       tooltip: {
-        mode: 'index',
+        mode: 'x',
         intersect: false,
         animation: false,
         backgroundColor: 'rgba(15, 23, 42, 0.92)',

src/components/__tests__/ChartContainer.test.jsx

@@ -101,10 +101,15 @@ describe('ChartContainer', () => {
     screen.getByText(/差值统计/);
     expect(onMaxStepChange).toHaveBeenCalledWith(1);
 
+    // interaction and tooltip should use x mode to avoid index-based coupling
+    const opts = __lineProps[0].options;
+    expect(opts.interaction.mode).toBe('x');
+    expect(opts.plugins.tooltip.mode).toBe('x');
+
     // simulate hover to trigger sync
-      const hover = __lineProps[0].options.onHover;
-      hover({}, [{ index: 0, datasetIndex: 0 }]);
-      expect(__charts[1].setActiveElements).toHaveBeenCalled();
+    const hover = __lineProps[0].options.onHover;
+    hover({}, [{ index: 0, datasetIndex: 0 }]);
+    expect(__charts[1].setActiveElements).toHaveBeenCalled();
   });
 
   it('parses metrics, applies range and triggers callbacks', () => {