diff --git a/site/examples/case/interactions/demo/custom-shape.js b/site/examples/case/interactions/demo/custom-shape.js
new file mode 100644
index 000000000..9a921eb8f
--- /dev/null
+++ b/site/examples/case/interactions/demo/custom-shape.js
@@ -0,0 +1,49 @@
+import { Column } from '@ant-design/plots';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const DemoCustomShape = () => {
+  const config = {
+    data: [
+      { type: '1-3秒', value: 0.36 },
+      { type: '4-10秒', value: 0.25 },
+      { type: '11-30秒', value: 0.24 },
+      { type: '31-60秒', value: 0.19 },
+      { type: '1-3分', value: 0.12 },
+      { type: '3-10分', value: 0.15 },
+      { type: '10-30分', value: 0.16 },
+      { type: '30+分', value: 0.1 },
+    ],
+    xField: 'type',
+    yField: 'value',
+    annotations: [
+      {
+        type: 'shape',
+        xField: 'type',
+        yField: 'value',
+        style: {
+          render: ({ x, y }, context) => {
+            const { document } = context;
+            const g = document.createElement('g', {});
+            const { width } = document.getElementsByClassName('element')[0].getBBox();
+            const rect = document.createElement('rect', {
+              style: {
+                x: x - width / 2,
+                y: y - 20,
+                width,
+                height: 10,
+                fill: '#FF8C16',
+                cursor: 'pointer',
+              },
+            });
+            g.appendChild(rect);
+            return g;
+          },
+        },
+      },
+    ],
+  };
+  return <Column {...config} />;
+};
+
+ReactDOM.render(<DemoCustomShape />, document.getElementById('container'));
diff --git a/site/examples/case/interactions/demo/default-selected.js b/site/examples/case/interactions/demo/default-selected.js
new file mode 100644
index 000000000..6b61f5e35
--- /dev/null
+++ b/site/examples/case/interactions/demo/default-selected.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Bar } from '@ant-design/plots';
+
+const DemoSelected = () => {
+  const config = {
+    data: [
+      { type: '分类一', value: 87 },
+      { type: '分类二', value: 65 },
+      { type: '分类三', value: 48 },
+      { type: '分类四', value: 15 },
+      { type: '分类五', value: 10 },
+      { type: '其他', value: 5 },
+    ],
+    xField: 'type',
+    yField: 'value',
+    colorField: 'type',
+    state: {
+      unselected: { opacity: 0.5 },
+      selected: { lineWidth: 3, stroke: 'red' },
+    },
+    interaction: {
+      elementSelect: true,
+    },
+    onReady: ({ chart, ...rest }) => {
+      chart.on(
+        'afterrender',
+        () => {
+          const { document } = chart.getContext().canvas;
+          const elements = document.getElementsByClassName('element');
+          elements[0]?.emit('click');
+        },
+        true,
+      );
+    },
+  };
+  return <Bar {...config} />;
+};
+
+ReactDOM.render(<DemoSelected />, document.getElementById('container'));
diff --git a/site/examples/case/interactions/demo/meta.json b/site/examples/case/interactions/demo/meta.json
index 555170d2f..a80003ce7 100644
--- a/site/examples/case/interactions/demo/meta.json
+++ b/site/examples/case/interactions/demo/meta.json
@@ -51,6 +51,22 @@
         "en": "Data update"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*0O5VR5z7zlgAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "custom-shape.js",
+      "title": {
+        "zh": "自定义图形标记",
+        "en": "Custom shape"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n4GESr9WhDQAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "default-selected.js",
+      "title": {
+        "zh": "默认选中",
+        "en": "Default selected"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*PKwaRJj4WNsAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }
\ No newline at end of file