feat(tooltip): add text label support for crosshairs

- Add textX and textY options to display labels on crosshairs lines

- Support customizable text position and offset configuration

- Add textFill style for crosshairs labels in dark theme

- Update hideRuleX and hideRuleY to clean up text elements

Closes #7275

Author: 象数

src/interaction/tooltip.ts

@@ -1,4 +1,4 @@
-import { Circle, DisplayObject, IElement, Line } from '@antv/g';
+import { Circle, DisplayObject, IElement, Line, Text } from '@antv/g';
 import { sort, group, mean, bisector, minIndex } from '@antv/vendor/d3-array';
 import { deepMix, lowerFirst, set, throttle, last, isNumber } from '@antv/util';
 import { Tooltip as TooltipComponent } from '@antv/component';
@@ -347,13 +347,22 @@ function updateRuleX(
     polar,
     insetLeft,
     insetTop,
+    textXposition = 'start' as const,
+    textXoffsetX = 5,
+    textXoffsetY = 0,
+    textX = undefined,
+    textY = undefined,
+    textFill = undefined,
     ...rest
   },
 ) {
   const defaults = {
     lineWidth: 1,
     stroke: '#1b1e23',
     strokeOpacity: 0.5,
+    textX,
+    textY,
+    textFill,
     ...rest,
   };
 
@@ -429,6 +438,31 @@ function updateRuleX(
     ruleX.style.y1 = y1;
     ruleX.style.y2 = y2;
     root.ruleX = ruleX;
+
+    // Render text if crosshairsLabelX or textX is provided
+    const labelX = defaults.textX;
+    if (labelX) {
+      const createTextX = () => {
+        const text = new Text({
+          style: {
+            text: labelX,
+            fontSize: 12,
+            fill: defaults.textFill || defaults.stroke,
+            textAlign: textXposition,
+            textBaseline: 'middle',
+          },
+        });
+        root.appendChild(text);
+        return text;
+      };
+
+      const textX = root.textX || createTextX();
+      // Position at end of the crosshair line (right side)
+      textX.style.x = x2 + textXoffsetX;
+      textX.style.y = (y1 + y2) / 2 + textXoffsetY;
+      textX.style.text = labelX;
+      root.textX = textX;
+    }
   }
 }
 
@@ -446,13 +480,20 @@ function updateRuleY(
     polar,
     insetLeft,
     insetTop,
+    textYposition = 'end' as const,
+    textYoffsetX = 5,
+    textYoffsetY = 5,
+    textY = undefined,
+    textFill = undefined,
     ...rest
   },
 ) {
   const defaults = {
     lineWidth: 1,
     stroke: '#1b1e23',
     strokeOpacity: 0.5,
+    textY,
+    textFill,
     ...rest,
   };
 
@@ -498,6 +539,31 @@ function updateRuleY(
     ruleY.style.y1 = y1;
     ruleY.style.y2 = y2;
     root.ruleY = ruleY;
+
+    // Render text if textY is provided
+    const labelY = defaults.textY;
+    if (labelY) {
+      const createTextY = () => {
+        const text = new Text({
+          style: {
+            text: labelY,
+            fontSize: 12,
+            fill: defaults.textFill || defaults.stroke,
+            textAlign: textYposition,
+            textBaseline: 'bottom',
+          },
+        });
+        root.appendChild(text);
+        return text;
+      };
+
+      const textYObj = root.textY || createTextY();
+      // Position at end of the crosshair line (top)
+      textYObj.style.x = (x1 + x2) / 2 + textYoffsetX;
+      textYObj.style.y = y2 + textYoffsetY;
+      textYObj.style.text = labelY;
+      root.textY = textYObj;
+    }
   }
 }
 
@@ -506,13 +572,21 @@ function hideRuleY(root) {
     root.ruleY.remove();
     root.ruleY = undefined;
   }
+  if (root.textY) {
+    root.textY.remove();
+    root.textY = undefined;
+  }
 }
 
 function hideRuleX(root) {
   if (root.ruleX) {
     root.ruleX.remove();
     root.ruleX = undefined;
   }
+  if (root.textX) {
+    root.textX.remove();
+    root.textX = undefined;
+  }
 }
 
 function updateMarker(root, { data, style, theme }) {

src/spec/interaction.ts

@@ -219,6 +219,16 @@ export type TooltipInteraction = {
     event, // @todo
     options: { title: 'string'; items: TooltipItemValue[] },
   ) => HTMLElement | string;
+  // Crosshairs text label options
+  crosshairsTextFill?: string;
+  textX?: string;
+  textY?: string;
+  textXposition?: 'start' | 'center' | 'end';
+  textYposition?: 'start' | 'center' | 'end';
+  textXoffsetX?: number;
+  textXoffsetY?: number;
+  textYoffsetX?: number;
+  textYoffsetY?: number;
 } & Record<`crosshairs${any}`, any> &
   Record<`marker${any}`, any>;
 

src/theme/dark.ts

@@ -66,6 +66,7 @@ export const Dark: TC<DarkOptions> = (options) => {
         crosshairsStroke: '#fff',
         crosshairsLineWidth: 1,
         crosshairsStrokeOpacity: 0.25,
+        crosshairsTextFill: '#fff',
         css: {
           [g2Selector('tooltip')]: {
             background: '#1f1f1f',