diff --git a/tests/html/figure/1.html b/tests/html/figure/1.html
new file mode 100644
index 00000000..14dbe1a9
--- /dev/null
+++ b/tests/html/figure/1.html
@@ -0,0 +1,82 @@
+<!--
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="keywords"
+      content="kline time-line candlestick stock chart canvas k线 行情 蜡烛图 分时图 技术指标 图表"
+    />
+    <meta name="description" content="shape test" />
+    <script
+      type="text/javascript"
+      src="../../../dist/klinecharts.min.js"
+    ></script>
+    <script type="text/javascript" src="../../js/dataSource.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../css/chart.css" />
+    <title>Figure -- Use built-in figures</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="chart"></div>
+    <script>
+      // Testing figure bounding box with 0 width or height
+
+      klinecharts.registerOverlay({
+        name: "rect",
+        totalStep: 3,
+        needDefaultPointFigure: true,
+        needDefaultXAxisFigure: true,
+        needDefaultYAxisFigure: true,
+        createPointFigures: ({ coordinates }) => {
+          if (coordinates.length > 1) {
+            return [
+              {
+                type: "rect",
+                attrs: {
+                  x: coordinates[0].x,
+                  y: coordinates[0].y,
+                  width: coordinates[1].x - coordinates[0].x,
+                  height: coordinates[1].y - coordinates[0].y,
+                },
+                styles: { style: "stroke_fill" },
+              },
+            ];
+          }
+          return [];
+        },
+      });
+
+      window.onload = function () {
+        var chart = klinecharts.init("chart");
+        chart.createIndicator("EMA");
+        chart.applyNewData(generated());
+        // Create any
+        chart.createOverlay({
+          name: "rect",
+          onDrawEnd: (coordinates) => {
+            // Create one more to test vertical and horizontal 1px lines
+            chart.createOverlay({
+              name: "rect",
+            });
+          },
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/tests/index.html b/tests/index.html
index c40a632a..adc652fb 100644
--- a/tests/index.html
+++ b/tests/index.html
@@ -88,7 +88,13 @@ limitations under the License.
             children: [
               { title: 'Use built-in overlays', link: './html/overlay/1.html' },
               { title: 'Use built-in overlays, specify points', link: './html/overlay/2.html' },
-              { title: 'Overlay override', link: './html/overlay/3.html' }
+              { title: 'Overlay override', link: './html/overlay/3.html' },
+            ]
+          },
+          {
+            title: 'Figures',
+            children: [
+              { title: 'Rect bounding', link: './html/figure/1.html' },
             ]
           },
           { title: 'Set precision', link: './html/set-precision.html' },
