diff --git a/site/examples/general/candlestick/demo/basis.ts b/site/examples/general/candlestick/demo/basis.ts
new file mode 100644
index 0000000000..a1653cd741
--- /dev/null
+++ b/site/examples/general/candlestick/demo/basis.ts
@@ -0,0 +1,248 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  {
+    time: '2015-11-19',
+    start: 8.18,
+    max: 8.33,
+    min: 7.98,
+    end: 8.32,
+    volumn: 1810,
+    money: 14723.56,
+  },
+  {
+    time: '2015-11-18',
+    start: 8.37,
+    max: 8.6,
+    min: 8.03,
+    end: 8.09,
+    volumn: 2790.37,
+    money: 23309.19,
+  },
+  {
+    time: '2015-11-17',
+    start: 8.7,
+    max: 8.78,
+    min: 8.32,
+    end: 8.37,
+    volumn: 3729.04,
+    money: 31709.71,
+  },
+  {
+    time: '2015-11-16',
+    start: 8.18,
+    max: 8.69,
+    min: 8.05,
+    end: 8.62,
+    volumn: 3095.44,
+    money: 26100.69,
+  },
+  {
+    time: '2015-11-13',
+    start: 8.01,
+    max: 8.75,
+    min: 7.97,
+    end: 8.41,
+    volumn: 5815.58,
+    money: 48562.37,
+  },
+  {
+    time: '2015-11-12',
+    start: 7.76,
+    max: 8.18,
+    min: 7.61,
+    end: 8.15,
+    volumn: 4742.6,
+    money: 37565.36,
+  },
+  {
+    time: '2015-11-11',
+    start: 7.55,
+    max: 7.81,
+    min: 7.49,
+    end: 7.8,
+    volumn: 3133.82,
+    money: 24065.42,
+  },
+  {
+    time: '2015-11-10',
+    start: 7.5,
+    max: 7.68,
+    min: 7.44,
+    end: 7.57,
+    volumn: 2670.35,
+    money: 20210.58,
+  },
+  {
+    time: '2015-11-09',
+    start: 7.65,
+    max: 7.66,
+    min: 7.3,
+    end: 7.58,
+    volumn: 2841.79,
+    money: 21344.36,
+  },
+  {
+    time: '2015-11-06',
+    start: 7.52,
+    max: 7.71,
+    min: 7.48,
+    end: 7.64,
+    volumn: 2725.44,
+    money: 20721.51,
+  },
+  {
+    time: '2015-11-05',
+    start: 7.48,
+    max: 7.57,
+    min: 7.29,
+    end: 7.48,
+    volumn: 3520.85,
+    money: 26140.83,
+  },
+  {
+    time: '2015-11-04',
+    start: 7.01,
+    max: 7.5,
+    min: 7.01,
+    end: 7.46,
+    volumn: 3591.47,
+    money: 26285.52,
+  },
+  {
+    time: '2015-11-03',
+    start: 7.1,
+    max: 7.17,
+    min: 6.82,
+    end: 7,
+    volumn: 2029.21,
+    money: 14202.33,
+  },
+  {
+    time: '2015-11-02',
+    start: 7.09,
+    max: 7.44,
+    min: 6.93,
+    end: 7.17,
+    volumn: 3191.31,
+    money: 23205.11,
+  },
+  {
+    time: '2015-10-30',
+    start: 6.98,
+    max: 7.27,
+    min: 6.84,
+    end: 7.18,
+    volumn: 3522.61,
+    money: 25083.44,
+  },
+  {
+    time: '2015-10-29',
+    start: 6.94,
+    max: 7.2,
+    min: 6.8,
+    end: 7.05,
+    volumn: 2752.27,
+    money: 19328.44,
+  },
+  {
+    time: '2015-10-28',
+    start: 7.01,
+    max: 7.14,
+    min: 6.8,
+    end: 6.85,
+    volumn: 2311.11,
+    money: 16137.32,
+  },
+  {
+    time: '2015-10-27',
+    start: 6.91,
+    max: 7.31,
+    min: 6.48,
+    end: 7.18,
+    volumn: 3172.9,
+    money: 21827.3,
+  },
+  {
+    time: '2015-10-26',
+    start: 6.9,
+    max: 7.08,
+    min: 6.87,
+    end: 6.95,
+    volumn: 2769.31,
+    money: 19337.44,
+  },
+  {
+    time: '2015-10-23',
+    start: 6.71,
+    max: 6.85,
+    min: 6.58,
+    end: 6.79,
+    volumn: 2483.18,
+    money: 16714.31,
+  },
+  {
+    time: '2015-10-22',
+    start: 6.38,
+    max: 6.67,
+    min: 6.34,
+    end: 6.65,
+    volumn: 2225.88,
+    money: 14465.56,
+  },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .data(data)
+  .encode('x', 'time')
+  .encode('color', (d) => {
+    const trend = Math.sign(d.start - d.end);
+    return trend > 0 ? '下跌' : trend === 0 ? '不变' : '上涨';
+  })
+  .scale('x', {
+    compare: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
+  })
+  .scale('color', {
+    domain: ['下跌', '不变', '上涨'],
+    range: ['#4daf4a', '#999999', '#e41a1c'],
+  });
+
+chart
+  .link()
+  .encode('y', ['min', 'max'])
+  .tooltip({
+    title: 'time',
+    items: [
+      { field: 'start', name: '开盘价' },
+      { field: 'end', name: '收盘价' },
+      { field: 'min', name: '最低价' },
+      { field: 'max', name: '最高价' },
+    ],
+  });
+
+chart
+  .interval()
+  .encode('y', ['start', 'end'])
+  .style('fillOpacity', 1)
+  .style('stroke', (d) => {
+    if (d.start === d.end) return '#999999';
+  })
+  .axis('y', {
+    title: false,
+  })
+  .tooltip({
+    title: 'time',
+    items: [
+      { field: 'start', name: '开盘价' },
+      { field: 'end', name: '收盘价' },
+      { field: 'min', name: '最低价' },
+      { field: 'max', name: '最高价' },
+    ],
+  });
+
+chart.render();
diff --git a/site/examples/general/candlestick/demo/k-and-area.ts b/site/examples/general/candlestick/demo/k-and-area.ts
new file mode 100644
index 0000000000..ae7838248a
--- /dev/null
+++ b/site/examples/general/candlestick/demo/k-and-area.ts
@@ -0,0 +1,70 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart
+  .data({
+    type: 'fetch',
+    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/stock-03.json',
+  })
+  .encode('x', 'date')
+  .scale('color', {
+    domain: ['down', 'up'],
+    range: ['#4daf4a', '#e41a1c'],
+  })
+  .scale('x', {
+    compare: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
+  })
+  .scale('y', {
+    domain: [20, 35],
+  })
+  .axis('x', {
+    labelFormatter: (d) => new Date(d).toLocaleDateString(),
+  });
+
+chart.interaction('tooltip', {
+  shared: true,
+});
+
+chart
+  .area()
+  .encode('y', 'range')
+  .style('fillOpacity', 0.3)
+  .style('fill', '#64b5f6')
+  .animate(false);
+
+chart
+  .link()
+  .encode('y', ['lowest', 'highest'])
+  .encode('color', 'trend')
+  .animate('enter', {
+    type: 'waveIn',
+  });
+
+chart
+  .interval()
+  .encode('y', ['start', 'end'])
+  .encode('color', 'trend')
+  .style('fillOpacity', 1)
+  .axis('y', {
+    title: false,
+  })
+  .tooltip({
+    title: 'date',
+    items: [
+      { field: 'start' },
+      { field: 'end' },
+      { field: 'lowest' },
+      { field: 'highest' },
+    ],
+  })
+  .animate('enter', {
+    type: 'waveIn',
+  });
+
+chart.line().encode('x', 'date').encode('y', 'mean').style('stroke', '#FACC14');
+
+chart.render();
diff --git a/site/examples/general/candlestick/demo/k-and-column.ts b/site/examples/general/candlestick/demo/k-and-column.ts
new file mode 100644
index 0000000000..bb0656aa3e
--- /dev/null
+++ b/site/examples/general/candlestick/demo/k-and-column.ts
@@ -0,0 +1,114 @@
+import { Chart } from '@antv/g2';
+
+document.getElementById('container').innerHTML = `
+  <div id="kChart" ></div>
+  <div id="columnChart"></div>
+`;
+
+const KChart = new Chart({
+  container: 'kChart',
+  autoFit: true,
+  height: 360,
+  paddingLeft: 60,
+});
+
+KChart.data({
+  type: 'fetch',
+  value:
+    'https://gw.alipayobjects.com/os/antvdemo/assets/data/candle-sticks.json',
+})
+  .encode('x', 'time')
+  .encode('color', (d) => {
+    const trend = Math.sign(d.start - d.end);
+    return trend > 0 ? '下跌' : trend === 0 ? '不变' : '上涨';
+  })
+  .scale('x', {
+    compare: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
+  })
+  .scale('color', {
+    domain: ['下跌', '不变', '上涨'],
+    range: ['#4daf4a', '#999999', '#e41a1c'],
+  });
+
+KChart.link()
+  .encode('y', ['min', 'max'])
+  .tooltip({
+    title: 'time',
+    items: [
+      { field: 'start', name: '开盘价' },
+      { field: 'end', name: '收盘价' },
+      { field: 'min', name: '最低价' },
+      { field: 'max', name: '最高价' },
+    ],
+  });
+
+KChart.interval()
+  .encode('y', ['start', 'end'])
+  .style('fillOpacity', 1)
+  .style('stroke', (d) => {
+    if (d.start === d.end) return '#999999';
+  })
+  .axis('x', {
+    title: false,
+  })
+  .axis('y', {
+    title: false,
+  })
+  .tooltip({
+    title: 'time',
+    items: [
+      { field: 'start', name: '开盘价' },
+      { field: 'end', name: '收盘价' },
+      { field: 'min', name: '最低价' },
+      { field: 'max', name: '最高价' },
+    ],
+  });
+
+const ColumnChart = new Chart({
+  container: 'columnChart',
+  autoFit: true,
+  paddingTop: 0,
+  paddingBottom: 0,
+  height: 180,
+  paddingLeft: 60,
+});
+
+ColumnChart.data({
+  type: 'fetch',
+  value:
+    'https://gw.alipayobjects.com/os/antvdemo/assets/data/candle-sticks.json',
+});
+
+ColumnChart.interval()
+  .encode('x', 'time')
+  .encode('y', 'volumn')
+  .encode('color', (d) => {
+    const trend = Math.sign(d.start - d.end);
+    return trend > 0 ? '下跌' : trend === 0 ? '不变' : '上涨';
+  })
+  .scale('x', {
+    compare: (a, b) => new Date(a).getTime() - new Date(b).getTime(),
+  })
+  .scale('color', {
+    domain: ['下跌', '不变', '上涨'],
+    range: ['#4daf4a', '#999999', '#e41a1c'],
+  })
+  .axis('x', false)
+  .axis('y', {
+    title: false,
+  });
+
+KChart.on('legend:filter', (e) => {
+  const { nativeEvent, data } = e;
+  if (!nativeEvent) return;
+  ColumnChart.emit('legend:filter', { data });
+});
+
+KChart.on('legend:reset', (e) => {
+  const { nativeEvent, data } = e;
+  if (!nativeEvent) return;
+  ColumnChart.emit('legend:reset', { data });
+});
+
+KChart.render();
+ColumnChart.render();
diff --git a/site/examples/general/candlestick/demo/meta.json b/site/examples/general/candlestick/demo/meta.json
index 83f86f5f1d..dd3ee6f7d7 100644
--- a/site/examples/general/candlestick/demo/meta.json
+++ b/site/examples/general/candlestick/demo/meta.json
@@ -8,9 +8,33 @@
       "filename": "line-candle-stick.ts",
       "title": {
         "zh": "股票图",
-        "en": "Candle Stick Chart"
+        "en": "Candlestick chart"
       },
       "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*IXIkSa7SW2sAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "basis.ts",
+      "title": {
+        "zh": "K线图",
+        "en": "Candle Stick Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ehjWTYLKU_wAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "k-and-column.ts",
+      "title": {
+        "zh": "K 线图与柱状图",
+        "en": "Candlestick chart and column chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cYx-T6bM3AYAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "k-and-area.ts",
+      "title": {
+        "zh": "K 线图与范围区域图",
+        "en": "Candlestick chart and area range"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*h_ykRqdQySkAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }