diff --git a/demo/bubble-chart.html b/demo/bubble-chart.html
new file mode 100644
index 0000000..b5aac53
--- /dev/null
+++ b/demo/bubble-chart.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow">
+    <title>Bubble Chart</title>
+</head>
+
+<body>
+    <link href="../dist/singledivui.min.css" rel="stylesheet" />
+    <script src="../dist/singledivui.min.js"></script>
+
+    <h1>SingleDivUI</h1>
+
+    <div class="row">
+        <div class="cell">
+            <h2>Bubble Chart</h2>
+            <div id="chart1"></div>
+        </div>
+
+        <div class="cell">
+            <h2>Bubble Chart</h2>
+            <div id="chart2"></div>
+        </div>
+    </div>
+
+    <!-- <div id="circle1" style="height: 20px;width: 20px;position: absolute;background: #ff000054;border-radius: 100%;top: 258px;left: 740px;z-index: 10000;"></div>
+
+    <div id="circle2" style="height: 200px;width: 200px;position: absolute;background: #4caf5047;border-radius: 100%;top: 168px;left: 650px;z-index: 10000;"></div> -->
+
+    <style>
+        body {
+            padding: 10px 35px;
+            font-family: Verdana, Arial, sans-serif;
+        }
+        .row {
+            display: flex;
+            flex-direction: column;
+            gap: 40px;
+        }
+        .cell {
+            padding: 0px 35px;
+        }
+
+        #chart2 {
+            --bubble-color: #f443364d;
+            --bubble-border-color: #F44336;
+        }
+    </style>
+
+    <script>
+        const { Chart } = SingleDivUI;
+
+        function renderBubbleChart(id, points) {
+            new Chart(`#${id}`, {
+                type: 'bubble',
+                height: 260,
+                width: 520,
+
+                data: {
+                    series: {
+                        points,
+                    }
+                }
+            });
+        }
+
+
+        const points1 = [
+            { x: 2,  y: 9, r: 5  },
+            { x: 6,  y: 15, r: 8  },
+            { x: 5,  y: 28, r: 14 },
+            { x: 8,  y: 42, r: 18 },
+            { x: 15, y: 37, r: 10 },
+
+            { x: 15, y: 65, r: 30 },
+            { x: 18, y: 22, r: 12 },
+            { x: 25, y: 40, r: 14 },
+
+            { x: 30, y: 88, r: 36 },
+            { x: 35, y: 55, r: 22 },
+            { x: 42, y: 18, r: 9  },
+
+            { x: 42, y: 76, r: 22 },
+            { x: 48, y: 105, r: 18 },
+            { x: 60, y: 114, r: 10 },
+            { x: 50, y: 32, r: 14 },
+            { x: 58, y: 70, r: 52 },
+            { x: 65, y: 48, r: 22 },
+
+            { x: 68, y: 88, r: 30 },
+            { x: 78, y: 98, r: 12 },
+            { x: 75, y: 60, r: 11 },
+            { x: 85, y: 68, r: 24 },
+            { x: 80, y: 40, r: 18 },
+
+            { x: 88, y: 105, r: 10 },
+            { x: 95, y: 85, r: 14 },
+            { x: 98, y: 115, r: 7 },
+
+            { x: 81, y: 112, r: 10 },
+            { x: 95, y: 105, r: 4 },
+            { x: 92, y: 111, r: 6 },
+            { x: 98, y: 108, r: 2 },
+            { x: 86, y: 115, r: 5 },
+        ];
+
+        const points2 = [
+            { x: 2,  y: 9, r: 5  },
+            { x: 6,  y: 15, r: 8  },
+            { x: 5,  y: 28, r: 14 },
+            { x: 8,  y: 42, r: 18 },
+            { x: 15, y: 37, r: 10 },
+
+            { x: 15, y: 65, r: 30 },
+            { x: 18, y: 22, r: 12 },
+            { x: 25, y: 40, r: 14 },
+
+            { x: 30, y: 88, r: 36 },
+            { x: 35, y: 55, r: 22 },
+            { x: 42, y: 18, r: 9  },
+
+            { x: 45, y: 78, r: 20 },
+            { x: 50, y: 32, r: 14 },
+            { x: 58, y: 70, r: 45 },
+            { x: 65, y: 48, r: 22 },
+
+            { x: 72, y: 88, r: 30 },
+            { x: 77, y: 52, r: 11 },
+            { x: 85, y: 68, r: 24 },
+            { x: 92, y: 45, r: 18 },
+
+            { x: 88, y: 105, r: 10 },
+            { x: 95, y: 85, r: 14 },
+            { x: 98, y: 115, r: 7 },
+
+            { x: 81, y: 112, r: 10 },
+            { x: 95, y: 105, r: 4 },
+            { x: 92, y: 111, r: 6 },
+            { x: 98, y: 108, r: 2 },
+            { x: 86, y: 115, r: 5 },
+        ];
+
+        const points3 = [
+            // { x: 0, y: 30, r: 15 },
+            { x: 10, y: 60, r: 25 },
+            { x: 20, y: 45, r: 40 },
+
+            { x: 15, y: 75, r: 10 },
+            { x: 12, y: 30, r: 28 },
+            { x: 5, y: 40, r: 18 },
+            { x: 25, y: 30, r: 12 },
+            { x: 28, y: 40, r: 17 },
+            { x: 23, y: 70, r: 8 },
+            { x: 18, y: 17, r: 12 },
+
+            { x: 30, y: 30, r: 15 },
+            { x: 35, y: 60, r: 25 },
+            { x: 40, y: 45, r: 40 },
+
+            { x: 25, y: 75, r: 10 },
+            { x: 22, y: 25, r: 6 },
+            { x: 35, y: 30, r: 12 },
+            { x: 33, y: 70, r: 8 },
+            { x: 28, y: 17, r: 12 },
+
+            { x: 30, y: 80, r: 30 },
+            // { x: 40, y: 55, r: 20 }
+        ];
+
+        renderBubbleChart('chart1', points1);
+        renderBubbleChart('chart2', points2);
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/demo/chart.html b/demo/chart.html
new file mode 100644
index 0000000..007bc54
--- /dev/null
+++ b/demo/chart.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="robots" content="noindex, nofollow">
+    <title>Charts</title>
+</head>
+
+<body>
+    <link href="../dist/singledivui.min.css" rel="stylesheet" />
+    <script src="../dist/singledivui.min.js"></script>
+
+    <h1>SingleDivUI</h1>
+
+    <div class="row">
+        <div class="cell">
+            <h2>Line Chart</h2>
+            <div id="chart1"></div>
+        </div>
+        <div class="cell">
+            <h2>Bar Chart</h2>
+            <div id="chart2"></div>
+        </div>
+        <div class="cell">
+            <h2>Area Chart</h2>
+            <div id="chart3"></div>
+        </div>
+    </div>
+
+    <style>
+        body {
+            padding: 10px 35px;
+            font-family: Verdana, Arial, sans-serif;
+        }
+        .row {
+            display: flex;
+        }
+        .cell {
+            padding: 0px 35px;
+        }
+    </style>
+
+    <script>
+        const { Chart } = SingleDivUI;
+
+        const options = {
+        data: {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+            series: {
+                points: [15, 9, 25, 18, 31, 25]
+            }
+        },
+        height: 200,
+        width: 400
+        };
+
+        new Chart('#chart1',  {
+            type: 'line',
+            ...options  
+        });
+
+        new Chart('#chart2',  {
+            type: 'bar',
+            ...options
+        });
+
+        new Chart('#chart3',  {
+            type: 'area',
+            ...options
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
