diff --git a/site/docs/manual/core/interaction.en.md b/site/docs/manual/core/interaction.en.md
index f1e27bd23c..4e231878e3 100644
--- a/site/docs/manual/core/interaction.en.md
+++ b/site/docs/manual/core/interaction.en.md
@@ -131,47 +131,66 @@ If the built-in interaction cannot meet your needs, you can also implement some
 
 ```js | ob
 (() => {
-  const chart = new G2.Chart();
+  const { Chart, PLOT_CLASS_NAME, ELEMENT_CLASS_NAME, register } = G2;
+
+  register('interaction.customElementHighlight', () => {
+    return (context, _, emitter) => {
+      const { container } = context;
+      const plotArea = container.querySelector(`.${PLOT_CLASS_NAME}`);
+      const elements = plotArea.querySelectorAll(`.${ELEMENT_CLASS_NAME}`);
+      const elementSet = new Set(elements);
+
+      const pointerover = (e) => {
+        const { target: element } = e;
+        if (!elementSet.has(element)) return;
+        element.style.stroke = "red";
+        element.style.lineWidth = 2;
+      };
+
+      const pointerout = (e) => {
+        const { target: element } = e;
+        if (!elementSet.has(element)) return;
+        element.style.stroke = null;
+      };
+
+      plotArea.addEventListener('pointerover', pointerover);
+      plotArea.addEventListener('pointerout', pointerout);
+      return () => {
+        plotArea.removeEventListener('pointerover', pointerover);
+        plotArea.removeEventListener('pointerout', pointerout);
+      };
+    };
+  })
+
+  const chart = new Chart();
 
   chart
     .interval()
-    .data({
-      type: 'fetch',
-      value:
-        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
-    })
-    .transform({ type: 'sortX', by: 'y', reverse: true })
-    .encode('x', 'letter')
-    .encode('y', 'frequency')
-    .axis('y', { labelFormatter: '.0%' })
-    .state({
-      selected: { fill: '#f4bb51' }, // set selected state
-      unselected: { opacity: 0.6 }, // set unselected state
-    })
-    .interaction('elementSelect', true);
+    .data([
+      { name: "London", 月份: "Jan.", 月均降雨量: 18.9 },
+      { name: "London", 月份: "Feb.", 月均降雨量: 28.8 },
+      { name: "London", 月份: "Mar.", 月均降雨量: 39.3 },
+      { name: "London", 月份: "Apr.", 月均降雨量: 81.4 },
+      { name: "London", 月份: "May", 月均降雨量: 47 },
+      { name: "London", 月份: "Jun.", 月均降雨量: 20.3 },
+      { name: "London", 月份: "Jul.", 月均降雨量: 24 },
+      { name: "London", 月份: "Aug.", 月均降雨量: 35.6 },
+      { name: "Berlin", 月份: "Jan.", 月均降雨量: 12.4 },
+      { name: "Berlin", 月份: "Feb.", 月均降雨量: 23.2 },
+      { name: "Berlin", 月份: "Mar.", 月均降雨量: 34.5 },
+      { name: "Berlin", 月份: "Apr.", 月均降雨量: 99.7 },
+      { name: "Berlin", 月份: "May", 月均降雨量: 52.6 },
+      { name: "Berlin", 月份: "Jun.", 月均降雨量: 35.5 },
+      { name: "Berlin", 月份: "Jul.", 月均降雨量: 37.4 },
+      { name: "Berlin", 月份: "Aug.", 月均降雨量: 42.4 },
+    ])
+    .transform({ type: 'dodgeX' })
+    .encode('x', '月份')
+    .encode('y', '月均降雨量')
+    .encode('color', 'name')
+    .interaction('customElementHighlight', true);
 
-  // Bind interaction after rendering
-  chart.render().then((chart) => {
-    // Get G Canvas instance
-    const { canvas } = chart.getContext();
-
-    // Find graphic elements
-    const elements = canvas.document.getElementsByClassName(
-      G2.ELEMENT_CLASS_NAME,
-    );
-
-    // Highlight
-    for (const element of elements) {
-      element.addEventListener('mouseenter', () => {
-        element.style._fill = element.style.fill;
-        element.style.fill = 'red';
-      });
-
-      element.addEventListener('mouseleave', () => {
-        element.style.fill = element.style._fill;
-      });
-    }
-  });
+  chart.render();
 
   return chart.getContainer();
 })();
diff --git a/site/docs/manual/core/interaction.zh.md b/site/docs/manual/core/interaction.zh.md
index 3876471932..cfe1ee0952 100644
--- a/site/docs/manual/core/interaction.zh.md
+++ b/site/docs/manual/core/interaction.zh.md
@@ -127,47 +127,66 @@ chart.area():
 
 ```js | ob
 (() => {
-  const chart = new G2.Chart();
+  const { Chart, PLOT_CLASS_NAME, ELEMENT_CLASS_NAME, register } = G2;
+
+  register('interaction.customElementHighlight', () => {
+    return (context, _, emitter) => {
+      const { container } = context;
+      const plotArea = container.querySelector(`.${PLOT_CLASS_NAME}`);
+      const elements = plotArea.querySelectorAll(`.${ELEMENT_CLASS_NAME}`);
+      const elementSet = new Set(elements);
+
+      const pointerover = (e) => {
+        const { target: element } = e;
+        if (!elementSet.has(element)) return;
+        element.style.stroke = "red";
+        element.style.lineWidth = 2;
+      };
+
+      const pointerout = (e) => {
+        const { target: element } = e;
+        if (!elementSet.has(element)) return;
+        element.style.stroke = null;
+      };
+
+      plotArea.addEventListener('pointerover', pointerover);
+      plotArea.addEventListener('pointerout', pointerout);
+      return () => {
+        plotArea.removeEventListener('pointerover', pointerover);
+        plotArea.removeEventListener('pointerout', pointerout);
+      };
+    };
+  })
+
+  const chart = new Chart();
 
   chart
     .interval()
-    .data({
-      type: 'fetch',
-      value:
-        'https://gw.alipayobjects.com/os/bmw-prod/fb9db6b7-23a5-4c23-bbef-c54a55fee580.csv',
-    })
-    .transform({ type: 'sortX', by: 'y', reverse: true })
-    .encode('x', 'letter')
-    .encode('y', 'frequency')
-    .axis('y', { labelFormatter: '.0%' })
-    .state({
-      selected: { fill: '#f4bb51' }, // 设置选中状态
-      unselected: { opacity: 0.6 }, // 设置非选中状态
-    })
-    .interaction('elementSelect', true);
+    .data([
+      { name: "London", 月份: "Jan.", 月均降雨量: 18.9 },
+      { name: "London", 月份: "Feb.", 月均降雨量: 28.8 },
+      { name: "London", 月份: "Mar.", 月均降雨量: 39.3 },
+      { name: "London", 月份: "Apr.", 月均降雨量: 81.4 },
+      { name: "London", 月份: "May", 月均降雨量: 47 },
+      { name: "London", 月份: "Jun.", 月均降雨量: 20.3 },
+      { name: "London", 月份: "Jul.", 月均降雨量: 24 },
+      { name: "London", 月份: "Aug.", 月均降雨量: 35.6 },
+      { name: "Berlin", 月份: "Jan.", 月均降雨量: 12.4 },
+      { name: "Berlin", 月份: "Feb.", 月均降雨量: 23.2 },
+      { name: "Berlin", 月份: "Mar.", 月均降雨量: 34.5 },
+      { name: "Berlin", 月份: "Apr.", 月均降雨量: 99.7 },
+      { name: "Berlin", 月份: "May", 月均降雨量: 52.6 },
+      { name: "Berlin", 月份: "Jun.", 月均降雨量: 35.5 },
+      { name: "Berlin", 月份: "Jul.", 月均降雨量: 37.4 },
+      { name: "Berlin", 月份: "Aug.", 月均降雨量: 42.4 },
+    ])
+    .transform({ type: 'dodgeX' })
+    .encode('x', '月份')
+    .encode('y', '月均降雨量')
+    .encode('color', 'name')
+    .interaction('customElementHighlight', true);
 
-  // 渲染完成之后绑定交互
-  chart.render().then((chart) => {
-    // 获得 G Canvas 实例
-    const { canvas } = chart.getContext();
-
-    // 找到图形元素
-    const elements = canvas.document.getElementsByClassName(
-      G2.ELEMENT_CLASS_NAME,
-    );
-
-    // 高亮
-    for (const element of elements) {
-      element.addEventListener('mouseenter', () => {
-        element.style._fill = element.style.fill;
-        element.style.fill = 'red';
-      });
-
-      element.addEventListener('mouseleave', () => {
-        element.style.fill = element.style._fill;
-      });
-    }
-  });
+  chart.render();
 
   return chart.getContainer();
 })();