diff --git a/site/examples/general/interval/demo/bar-basic-grouped.ts b/site/examples/general/interval/demo/bar-basic-grouped.ts
new file mode 100644
index 0000000000..1cbc0f1a00
--- /dev/null
+++ b/site/examples/general/interval/demo/bar-basic-grouped.ts
@@ -0,0 +1,36 @@
+import { Chart } from '@antv/g2';
+
+const 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 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .interval()
+  .data(data)
+  .encode('x', '月份')
+  .encode('y', '月均降雨量')
+  .encode('color', 'name')
+  .transform({ type: 'dodgeX' })
+  .interaction('elementHighlight', { background: true });
+
+chart.render();
diff --git a/site/examples/general/interval/demo/bar-basic-stacked.ts b/site/examples/general/interval/demo/bar-basic-stacked.ts
new file mode 100644
index 0000000000..74b82a86e7
--- /dev/null
+++ b/site/examples/general/interval/demo/bar-basic-stacked.ts
@@ -0,0 +1,36 @@
+import { Chart } from '@antv/g2';
+
+const 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 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .interval()
+  .data(data)
+  .encode('x', '月份')
+  .encode('y', '月均降雨量')
+  .encode('color', 'name')
+  .transform({ type: 'stackY' })
+  .interaction('elementHighlight', { background: true });
+
+chart.render();
diff --git a/site/examples/general/interval/demo/bar-basic-transposed.ts b/site/examples/general/interval/demo/bar-basic-transposed.ts
new file mode 100644
index 0000000000..3d525476db
--- /dev/null
+++ b/site/examples/general/interval/demo/bar-basic-transposed.ts
@@ -0,0 +1,26 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .interval()
+  .coordinate({ transform: [{ type: 'transpose' }] })
+  .data(data)
+  .encode('x', 'year')
+  .encode('y', 'sales');
+
+chart.render();
diff --git a/site/examples/general/interval/demo/bar-basic.ts b/site/examples/general/interval/demo/bar-basic.ts
new file mode 100644
index 0000000000..497f3e890b
--- /dev/null
+++ b/site/examples/general/interval/demo/bar-basic.ts
@@ -0,0 +1,21 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { year: '1951 年', sales: 38 },
+  { year: '1952 年', sales: 52 },
+  { year: '1956 年', sales: 61 },
+  { year: '1957 年', sales: 145 },
+  { year: '1958 年', sales: 48 },
+  { year: '1959 年', sales: 38 },
+  { year: '1960 年', sales: 38 },
+  { year: '1962 年', sales: 38 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart.interval().data(data).encode('x', 'year').encode('y', 'sales');
+
+chart.render();
diff --git a/site/examples/general/interval/demo/meta.json b/site/examples/general/interval/demo/meta.json
index 6f8e9c0df0..0fec463492 100644
--- a/site/examples/general/interval/demo/meta.json
+++ b/site/examples/general/interval/demo/meta.json
@@ -4,6 +4,38 @@
     "en": "Category"
   },
   "demos": [
+    {
+      "filename": "bar-basic.ts",
+      "title": {
+        "zh": "简单柱状图",
+        "en": "Simple Column"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*fNFMRb3DlokAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "bar-basic-transposed.ts",
+      "title": {
+        "zh": "简单条形图",
+        "en": "Simple Bar"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*sxEATqf3uoEAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "bar-basic-stacked.ts",
+      "title": {
+        "zh": "简单堆叠柱状图",
+        "en": "Simple Stacked Column"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*69WQTY8YrWgAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "bar-basic-grouped.ts",
+      "title": {
+        "zh": "简单分组柱状图",
+        "en": "Simple Grouped Column"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*kqGUT4wRYrsAAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "column.ts",
       "title": {