diff --git a/__tests__/plots/api/chart-render-3d-bar-chart-perspective.ts b/__tests__/plots/api/chart-render-3d-bar-chart-perspective.ts
index 30b1d7905f..20e9569637 100644
--- a/__tests__/plots/api/chart-render-3d-bar-chart-perspective.ts
+++ b/__tests__/plots/api/chart-render-3d-bar-chart-perspective.ts
@@ -18,7 +18,6 @@ export function chartRender3dBarChartPerspective(context) {
     container,
     renderer,
     depth: 400,
-    // padding: 10,
   });
 
   const data: { x: string; z: string; y: number; color: number }[] = [];
diff --git a/site/.dumi/theme/components/ConfigPanel.tsx b/site/.dumi/theme/components/ConfigPanel.tsx
index deb40d88f4..4945fb4ede 100644
--- a/site/.dumi/theme/components/ConfigPanel.tsx
+++ b/site/.dumi/theme/components/ConfigPanel.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import { Button, Collapse, Radio } from 'antd';
 import { UploadOutlined, CopyOutlined } from '@ant-design/icons';
-import { createLibrary } from '@antv/g2';
+import { stdlib } from '@antv/g2';
 import { copyToClipboard } from '../utils/copyToBoard';
 import { exportDataToLocal } from '../utils/exportDataToLocal';
 import './ConfigPanel.less';
 
 const BUILT_THEMES = [
   { label: '默认风格', key: 'light' },
-  { label: '暗色风格', key: 'dark' },
+  { label: '暗色风格', key: 'classicDark' },
   { label: '学术风格', key: 'academy' },
 ];
 
 function getG2Theme(theme: string | Record<string, any>) {
   if (typeof theme === 'object') return theme;
 
-  const library = createLibrary();
+  const library = stdlib();
   const themeToken = library[`theme.${theme}`]();
   return themeToken;
 }
@@ -63,7 +63,9 @@ export const ConfigPanel = (props) => {
             value={theme}
           >
             {BUILT_THEMES.map((d) => (
-              <Radio.Button value={d.key}>{d.label}</Radio.Button>
+              <Radio.Button value={d.key} key={d.key}>
+                {d.label}
+              </Radio.Button>
             ))}
           </Radio.Group>
         </Collapse.Panel>
diff --git a/site/.dumi/theme/components/DemosView.less b/site/.dumi/theme/components/DemosView.less
index 4e2f24acf8..47a757d60b 100644
--- a/site/.dumi/theme/components/DemosView.less
+++ b/site/.dumi/theme/components/DemosView.less
@@ -11,7 +11,6 @@
   .demo {
     padding: 18px 12px;
     width: 100%;
-    height: 372px;
     background-color: #fff;
 
     .demo-title {
@@ -24,8 +23,17 @@
     }
 
     .demo-container {
+      position: relative;
       margin-top: 14px;
-      height: calc(100% - 40px);
+      width: 100%;
+      height: 0px;
+      padding-top: 75%;
+    }
+
+    .demo-container > canvas {
+      position: absolute;
+      left: 0px;
+      top: 0px;
     }
   }
 
diff --git a/site/.dumi/theme/components/DemosView.tsx b/site/.dumi/theme/components/DemosView.tsx
index d04f1cb426..d248b81c8d 100644
--- a/site/.dumi/theme/components/DemosView.tsx
+++ b/site/.dumi/theme/components/DemosView.tsx
@@ -9,7 +9,13 @@ const DemoContainer = ({ theme, className = '', render }) => {
   const chartRef = React.useRef<Chart | null>(null);
 
   function init(theme) {
-    chartRef.current = render(domRef.current, theme);
+    const container = domRef.current;
+    chartRef.current = render({
+      container,
+      theme,
+      width: container.clientWidth,
+      height: container.clientHeight,
+    });
   }
 
   React.useEffect(() => {
@@ -17,8 +23,8 @@ const DemoContainer = ({ theme, className = '', render }) => {
       init(theme);
     } else {
       const chart = chartRef.current;
-      chart.theme({ type: theme });
-      chart.render();
+      chart.destroy();
+      init(theme);
     }
   }, [theme]);
 
@@ -26,9 +32,11 @@ const DemoContainer = ({ theme, className = '', render }) => {
     const el = domRef.current;
 
     const resizeObserver = new ResizeObserver((entries) => {
+      const width = el.clientWidth;
+      const height = el.clientHeight;
       entries.forEach(() => {
         const chart = chartRef.current;
-        chart && chart.forceFit();
+        chart && chart.changeSize(width, height);
       });
     });
 
@@ -40,41 +48,28 @@ const DemoContainer = ({ theme, className = '', render }) => {
 };
 
 export const DemosView = ({ theme, className = '' }) => {
-  function openExample(key, example) {
-    const hash = `${example.name}`.replace(
-      /[A-Z]/g,
-      (a) => `-${a.toLowerCase()}`,
-    );
+  function openExample(example) {
     // @ts-ignore
-    window.open(`/examples/${key}#${hash}`);
+    window.open(`/examples/${example.link}`);
   }
 
   return (
     <div className={`demos-view ${className} theme-${theme}`}>
-      {Object.keys(examples as any).map((key) =>
-        Array.from(examples[key]).map((example: any) => {
-          if (typeof example.render !== 'function') return;
-
-          return (
-            <Badge.Ribbon
-              text={
-                <span onClick={() => openExample(key, example.render)}>
-                  source
-                </span>
-              }
-            >
-              <div className="demo">
-                <div className="demo-title">{example.title}</div>
-                <DemoContainer
-                  className="demo-container"
-                  theme={theme}
-                  render={example.render}
-                />
-              </div>
-            </Badge.Ribbon>
-          );
-        }),
-      )}
+      {examples.map((example) => (
+        <Badge.Ribbon
+          text={<span onClick={() => openExample(example)}>source</span>}
+        >
+          <div className="demo">
+            <div className="demo-title">{example.title}</div>
+            <DemoContainer
+              key={example.link}
+              className="demo-container"
+              theme={theme}
+              render={example.render}
+            />
+          </div>
+        </Badge.Ribbon>
+      ))}
     </div>
   );
 };
diff --git a/site/.dumi/theme/examples/bar-aggregated.ts b/site/.dumi/theme/examples/bar-aggregated.ts
index e714daf477..28116fca43 100644
--- a/site/.dumi/theme/examples/bar-aggregated.ts
+++ b/site/.dumi/theme/examples/bar-aggregated.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const barAggregated = (container, theme, plugins = []) => {
+export const barAggregated = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    paddingLeft: 60,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
diff --git a/site/.dumi/theme/examples/bar-dodged.ts b/site/.dumi/theme/examples/bar-dodged.ts
index aa27df0eca..0a80789c61 100644
--- a/site/.dumi/theme/examples/bar-dodged.ts
+++ b/site/.dumi/theme/examples/bar-dodged.ts
@@ -3,16 +3,14 @@
  */
 import { Chart } from '@antv/g2';
 
-export const BarDodged = (container, theme, plugins = []) => {
+export const BarDodged = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    paddingLeft: 50,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
-  chart.interaction({ type: 'tooltip', shared: true });
 
   chart
     .interval()
@@ -28,7 +26,7 @@ export const BarDodged = (container, theme, plugins = []) => {
     .encode('y', 'population')
     .encode('color', 'age')
     .axis('y', { labelFormatter: '~s' })
-    .legend('color', { size: 20 });
+    .interaction('tooltip', { shared: true });
 
   chart.render();
 
diff --git a/site/.dumi/theme/examples/bar-range.ts b/site/.dumi/theme/examples/bar-range.ts
index 237a2d428f..f0a73fc5d3 100644
--- a/site/.dumi/theme/examples/bar-range.ts
+++ b/site/.dumi/theme/examples/bar-range.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const BarRange = (container, theme, plugins = []) => {
+export const BarRange = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    paddingLeft: 60,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
@@ -32,8 +31,7 @@ export const BarRange = (container, theme, plugins = []) => {
     .encode('color', (d) =>
       d.month === 'Total' ? 'Total' : d.profit > 0 ? 'Increase' : 'Decrease',
     )
-    .axis('y', { labelFormatter: '~s' })
-    .legend('color', { size: 20 });
+    .axis('y', { labelFormatter: '~s' });
 
   chart.render();
 
diff --git a/site/.dumi/theme/examples/grouped-box.ts b/site/.dumi/theme/examples/grouped-box.ts
index 7f2e42009f..83c761d8b7 100644
--- a/site/.dumi/theme/examples/grouped-box.ts
+++ b/site/.dumi/theme/examples/grouped-box.ts
@@ -1,6 +1,6 @@
 import { Chart } from '@antv/g2';
 
-export const groupedBox = (container, theme, plugins = []) => {
+export const groupedBox = ({ container, theme, width, height }) => {
   const data = [
     {
       Species: 'I. setosa',
@@ -78,12 +78,10 @@ export const groupedBox = (container, theme, plugins = []) => {
 
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
-  chart.theme({ type: theme });
-
   chart
     .box()
     .data(data)
@@ -93,7 +91,16 @@ export const groupedBox = (container, theme, plugins = []) => {
     .encode('color', 'Species')
     .scale('x', { paddingInner: 0.2, paddingOuter: 0.1 })
     .scale('y', { zero: true })
-    .scale('series', { paddingInner: 0.3, paddingOuter: 0.1 });
+    .scale('series', { paddingInner: 0.3, paddingOuter: 0.1 })
+    .tooltip([
+      { name: 'min', channel: 'y' },
+      { name: 'q1', channel: 'y1' },
+      { name: 'q2', channel: 'y2' },
+      { name: 'q3', channel: 'y3' },
+      { name: 'max', channel: 'y4' },
+    ]);
+
+  chart.theme({ type: theme });
 
   chart.render();
 
diff --git a/site/.dumi/theme/examples/index.ts b/site/.dumi/theme/examples/index.ts
index 47ef7e5e3c..5c1d2a9984 100644
--- a/site/.dumi/theme/examples/index.ts
+++ b/site/.dumi/theme/examples/index.ts
@@ -13,25 +13,45 @@ import { treemap } from './treemap';
 // import { barAggregated } from './bar-aggregated';
 // import { sankey } from './sankey';
 
-export const examples = {
-  'general/interval': [
-    { title: '分组柱状图', render: BarDodged },
-    { title: '区间柱状图', render: BarRange },
-  ],
-  'general/line': [
-    { title: '数据缺失折线图', render: lineConnectNulls },
-    { title: '归一化折线图', render: lineNormalized },
-  ],
-  'general/area': [
-    { title: '数据缺失面积图', render: missingDataArea },
-    { title: '堆叠面积图', render: stackedArea },
-  ],
-  'general/point': [{ title: '对数气泡图', render: pointLog }],
-  'general/radial': [
-    { title: '饼图', render: spiderLabel },
-    { title: '', render: roseLabel },
-  ],
-  'general/dual': [{ title: '柱线混合图', render: lineBar }],
-  'general/box': [{ title: '分组箱线图', render: groupedBox }],
-  'graph/hierarchy': [{ title: 'Treemap', render: treemap }],
-};
+export const examples = [
+  {
+    title: '分组柱状图',
+    render: BarDodged,
+    link: 'general/interval/#bar-dodged',
+  },
+  {
+    title: '区间柱状图',
+    render: BarRange,
+    link: 'general/interval/#bar-range',
+  },
+  {
+    title: '数据缺失折线图',
+    render: lineConnectNulls,
+    link: 'general/line/#line-connect-nulls',
+  },
+  {
+    title: '归一化折线图',
+    render: lineNormalized,
+    link: 'general/line/#line-normalized',
+  },
+  {
+    title: '数据缺失面积图',
+    render: missingDataArea,
+    link: 'general/area/#missing-data-area',
+  },
+  {
+    title: '堆叠面积图',
+    render: stackedArea,
+    link: 'general/area/#stacked-area',
+  },
+  { title: '对数气泡图', render: pointLog, link: 'general/point/#point-log' },
+  { title: '饼图', render: spiderLabel, link: 'general/pie/#spider-label' },
+  { title: '玫瑰图', render: roseLabel, link: 'general/rose/#rose-label' },
+  { title: '柱线混合图', render: lineBar, link: 'general/dual/#line-bar' },
+  {
+    title: '分组箱线图',
+    render: groupedBox,
+    link: 'general/box/#grouped-box',
+  },
+  { title: '矩阵树图', render: treemap, link: 'graph/hierarchy/#treemap' },
+];
diff --git a/site/.dumi/theme/examples/line-bar.ts b/site/.dumi/theme/examples/line-bar.ts
index 1a25e53617..efd1d8e8cd 100644
--- a/site/.dumi/theme/examples/line-bar.ts
+++ b/site/.dumi/theme/examples/line-bar.ts
@@ -1,6 +1,6 @@
 import { Chart } from '@antv/g2';
 
-export const lineBar = (container, theme, plugins = []) => {
+export const lineBar = ({ container, theme, width, height }) => {
   const data = [
     { time: '10:10', call: 4, waiting: 2, people: 2 },
     { time: '10:15', call: 2, waiting: 6, people: 3 },
@@ -13,8 +13,8 @@ export const lineBar = (container, theme, plugins = []) => {
 
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
diff --git a/site/.dumi/theme/examples/line-connect-nulls.ts b/site/.dumi/theme/examples/line-connect-nulls.ts
index 77de9259a4..d53408cd06 100644
--- a/site/.dumi/theme/examples/line-connect-nulls.ts
+++ b/site/.dumi/theme/examples/line-connect-nulls.ts
@@ -3,12 +3,11 @@
  */
 import { Chart } from '@antv/g2';
 
-export const lineConnectNulls = (container, theme, plugins = []) => {
+export const lineConnectNulls = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
-    paddingTop: 0,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
diff --git a/site/.dumi/theme/examples/line-normalized.ts b/site/.dumi/theme/examples/line-normalized.ts
index 31214b4c15..97b7756a0b 100644
--- a/site/.dumi/theme/examples/line-normalized.ts
+++ b/site/.dumi/theme/examples/line-normalized.ts
@@ -1,9 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const lineNormalized = (container, theme: string) => {
+export const lineNormalized = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
@@ -19,8 +20,7 @@ export const lineNormalized = (container, theme: string) => {
     .encode('y', 'Close')
     .encode('color', 'Symbol')
     .scale('y', { type: 'log' })
-    .axis('y', { title: '↑ Change in price (%)' })
-    .legend('color', { size: 20 });
+    .axis('y', { title: '↑ Change in price (%)' });
 
   chart.render();
 
diff --git a/site/.dumi/theme/examples/missing-data-area.ts b/site/.dumi/theme/examples/missing-data-area.ts
index 90e2c2330f..6835504463 100644
--- a/site/.dumi/theme/examples/missing-data-area.ts
+++ b/site/.dumi/theme/examples/missing-data-area.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const missingDataArea = (container, theme, plugins = []) => {
+export const missingDataArea = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
-    paddingTop: 0,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
@@ -20,7 +19,9 @@ export const missingDataArea = (container, theme, plugins = []) => {
     .encode('x', (d) => new Date(d.date))
     // Mock missing data. Set NaN from Jan. to Mar.
     .encode('y', (d) => (new Date(d.date).getUTCMonth() <= 3 ? NaN : d.close))
-    .style('connectNulls', true);
+    .style('connect', true)
+    .style('connectFill', 'grey')
+    .style('connectFillOpacity', 0.15);
 
   chart.render();
 
diff --git a/site/.dumi/theme/examples/point-log.ts b/site/.dumi/theme/examples/point-log.ts
index 01ac0acbd6..dbbe70457d 100644
--- a/site/.dumi/theme/examples/point-log.ts
+++ b/site/.dumi/theme/examples/point-log.ts
@@ -1,14 +1,13 @@
 import { Chart } from '@antv/g2';
 
-export const pointLog = (container, theme, plugins = []) => {
+export const pointLog = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
-  chart.interaction({ type: 'fisheye' });
 
   chart
     .point()
@@ -24,7 +23,8 @@ export const pointLog = (container, theme, plugins = []) => {
     .scale('size', { type: 'log', range: [4, 20] })
     .style('fillOpacity', 0.3)
     .style('lineWidth', 1)
-    .legend('color', { size: 20 });
+    .legend('size', false)
+    .interaction('fisheye', true);
 
   chart.render();
 
diff --git a/site/.dumi/theme/examples/rose-label.ts b/site/.dumi/theme/examples/rose-label.ts
index f662777a5c..15d5b84cad 100644
--- a/site/.dumi/theme/examples/rose-label.ts
+++ b/site/.dumi/theme/examples/rose-label.ts
@@ -1,18 +1,17 @@
 import { Chart } from '@antv/g2';
 
-export const roseLabel = (container, theme, plugins = []) => {
+export const roseLabel = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
 
-  chart.coordinate({ type: 'polar', outerRadius: 0.85 });
-
   chart
     .interval()
+    .coordinate({ type: 'polar', outerRadius: 0.85 })
     .transform({ type: 'groupX', y: 'sum' })
     .data({
       type: 'fetch',
diff --git a/site/.dumi/theme/examples/sankey.ts b/site/.dumi/theme/examples/sankey.ts
index a41faca7a8..ddd108bc7b 100644
--- a/site/.dumi/theme/examples/sankey.ts
+++ b/site/.dumi/theme/examples/sankey.ts
@@ -1,10 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const sankey = (container, theme, plugins = []) => {
+export const sankey = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
@@ -27,7 +27,6 @@ export const sankey = (container, theme, plugins = []) => {
     })
     .style('labelSpacing', 3)
     .style('labelFontWeight', 'bold')
-    // .style('labelTransform', { type: 'overlapHide' })
     .style('nodeStrokeWidth', 1.2)
     .style('linkFillOpacity', 0.4);
 
diff --git a/site/.dumi/theme/examples/spider-label.ts b/site/.dumi/theme/examples/spider-label.ts
index 0fa9c98e2d..f5783976f1 100644
--- a/site/.dumi/theme/examples/spider-label.ts
+++ b/site/.dumi/theme/examples/spider-label.ts
@@ -1,10 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const spiderLabel = (container, theme, plugins = []) => {
+export const spiderLabel = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.coordinate({
diff --git a/site/.dumi/theme/examples/stacked-area.ts b/site/.dumi/theme/examples/stacked-area.ts
index df91949b8d..c8084c4649 100644
--- a/site/.dumi/theme/examples/stacked-area.ts
+++ b/site/.dumi/theme/examples/stacked-area.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const stackedArea = (container, theme, plugins = []) => {
+export const stackedArea = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    autoFit: true,
-    plugins,
-    paddingLeft: 60,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
diff --git a/site/.dumi/theme/examples/treemap.ts b/site/.dumi/theme/examples/treemap.ts
index f35e862906..fc5518a157 100644
--- a/site/.dumi/theme/examples/treemap.ts
+++ b/site/.dumi/theme/examples/treemap.ts
@@ -1,11 +1,10 @@
 import { Chart } from '@antv/g2';
 
-export const treemap = (container, theme, plugins = []) => {
+export const treemap = ({ container, theme, width, height }) => {
   const chart = new Chart({
     container,
-    theme: 'classic',
-    autoFit: true,
-    plugins,
+    width,
+    height,
   });
 
   chart.theme({ type: theme });
diff --git a/site/.dumi/theme/index.tsx b/site/.dumi/theme/index.tsx
index 88ca211f94..b65bd4fcd6 100644
--- a/site/.dumi/theme/index.tsx
+++ b/site/.dumi/theme/index.tsx
@@ -6,7 +6,7 @@ import { DemosView } from './components/DemosView';
 import './index.less';
 
 const Page: React.FC = () => {
-  const [theme, changeTheme] = React.useState('academy');
+  const [theme, changeTheme] = React.useState('light');
   const [collapsed, toggleCollapsed] = React.useState(false);
 
   return (
diff --git a/site/.dumi/tsconfig.json b/site/.dumi/tsconfig.json
index 79711a82bb..31f12f94d8 100644
--- a/site/.dumi/tsconfig.json
+++ b/site/.dumi/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
-  "include": [
-    "**/*"
-  ]
-}
\ No newline at end of file
+  "compilerOptions": {
+    "module": "nodenext"
+  },
+  "include": ["**/*"]
+}
diff --git a/site/.dumirc.ts b/site/.dumirc.ts
index 776f606dbd..e9db87196f 100644
--- a/site/.dumirc.ts
+++ b/site/.dumirc.ts
@@ -80,6 +80,13 @@ export default defineConfig({
         },
         order: 0,
       },
+      {
+        slug: 'theme',
+        title: {
+          zh: '主题',
+          en: 'Theme',
+        },
+      },
     ],
     ecosystems: [
       // 头部的菜单中的「周边生态」