diff --git a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
index 0d76e029fb..dec268ef61 100644
--- a/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
+++ b/packages/vchart/src/plugin/components/tooltip-handler/dom-tooltip-handler.ts
@@ -285,7 +285,7 @@ export class DomTooltipHandler extends BaseTooltipHandler {
                 styleByRow = { ...styleByRow, ...getTextStyle(entry.valueStyle) };
               }
             } else if (colName === 'shape') {
-              row.innerHTML = getSvgHtml(entry);
+              row.innerHTML = getSvgHtml(entry, `${this.id}_${index}`);
             }
 
             setStyleToDom(row, styleByRow);
diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts
index 9283ddbba6..d2e11d2bef 100644
--- a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts
+++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts
@@ -5,7 +5,7 @@ import { Symbol } from '@visactor/vrender-core';
 import { Bounds, isObject, isString } from '@visactor/vutils';
 import type { ITooltipShapeActual } from '../../../../typings';
 
-export function getSvgHtml(option: ITooltipShapeActual | undefined, index?: number) {
+export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: string) {
   if (!option || !option.hasShape || !option.shapeType) {
     return '';
   }
@@ -61,7 +61,7 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, index?: numb
     </svg>`;
   }
   if (isObject(shapeFill)) {
-    fillString = 'gradientColor' + (index ?? '');
+    fillString = 'gradientColor' + (gradientId ?? '');
     let gradient = '';
     const stops = ((shapeFill as IGradientColor).stops ?? [])
       .map(s => `<stop offset="${escapeHTML(s.offset.toString())}" stop-color="${escapeHTML(s.color)}"/>`)