Fix/linear gradient string in tooltip

common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: when color is gradient string, tooltip icon should show correctly\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts

@@ -1,7 +1,7 @@
 import { escapeHTML } from './common';
 // eslint-disable-next-line no-duplicate-imports
-import type { CustomSymbolClass, IGradientColor, ILinearGradient } from '@visactor/vrender-core';
-import { Symbol } from '@visactor/vrender-core';
+import type { CustomSymbolClass, IColor, IGradientColor, ILinearGradient } from '@visactor/vrender-core';
+import { Symbol, GradientParser } from '@visactor/vrender-core';
 import { Bounds, isObject, isString } from '@visactor/vutils';
 import type { ITooltipShapeActual } from '../../../../typings';
 
@@ -11,7 +11,7 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?:
   }
 
   const styleString = `style="display:inline-block;vertical-align:middle;"`;
-  const { shapeType, shapeFill, shapeStroke, shapeHollow = false } = option;
+  const { shapeType, shapeStroke, shapeHollow = false, shapeFill } = option;
   const size = option.shapeSize ?? 8;
   const lineWidth = option.shapeLineWidth ? escapeHTML(option.shapeLineWidth) + 'px' : '0px';
   let fillString: string = 'currentColor';
@@ -49,7 +49,9 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?:
     viewBox = `${x - lw / 2} ${y - lw / 2} ${w + lw} ${h + lw}`;
   }
 
-  if (!shapeFill || isString(shapeFill) || shapeHollow) {
+  const isFillGradientStr = GradientParser.IsGradientStr(shapeFill);
+
+  if (!shapeFill || (isString(shapeFill) && !isFillGradientStr) || shapeHollow) {
     fillString = shapeHollow ? 'none' : shapeFill ? escapeHTML(shapeFill) : 'currentColor';
     return `
     <svg ${styleString} width="${size}" height="${size}" viewBox="${viewBox}">
@@ -60,22 +62,25 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?:
       </path>
     </svg>`;
   }
-  if (isObject(shapeFill)) {
+
+  const shapeFillObject = isFillGradientStr ? GradientParser.Parse(shapeFill) : isObject(shapeFill) ? shapeFill : null;
+
+  if (shapeFillObject) {
     fillString = 'gradientColor' + (gradientId ?? '');
     let gradient = '';
-    const stops = ((shapeFill as IGradientColor).stops ?? [])
+    const stops = ((shapeFillObject as IGradientColor).stops ?? [])
       .map(s => `<stop offset="${escapeHTML(s.offset.toString())}" stop-color="${escapeHTML(s.color)}"/>`)
       .join('');
-    if ((shapeFill as IGradientColor).gradient === 'radial') {
+    if ((shapeFillObject as IGradientColor).gradient === 'radial') {
       gradient = `<radialGradient id="${fillString}" cx="50%" cy="50%" r="50%" fx="0%" fy="0%">
       ${stops}
       </radialGradient>`;
-    } else if ((shapeFill as IGradientColor).gradient === 'linear') {
+    } else if ((shapeFillObject as IGradientColor).gradient === 'linear') {
       gradient = `<linearGradient id="${fillString}" x1="${
-        (((shapeFill as ILinearGradient).x0 as number) ?? 0) * 100
-      }%" y1="${(((shapeFill as ILinearGradient).y0 as number) ?? 0) * 100}%" x2="${
-        (((shapeFill as ILinearGradient).x1 as number) ?? 0) * 100
-      }%" y2="${(((shapeFill as ILinearGradient).y1 as number) ?? 0) * 100}%">
+        (((shapeFillObject as ILinearGradient).x0 as number) ?? 0) * 100
+      }%" y1="${(((shapeFillObject as ILinearGradient).y0 as number) ?? 0) * 100}%" x2="${
+        (((shapeFillObject as ILinearGradient).x1 as number) ?? 0) * 100
+      }%" y2="${(((shapeFillObject as ILinearGradient).y1 as number) ?? 0) * 100}%">
       ${stops}
       </linearGradient>`;
     }