diff --git a/package-lock.json b/package-lock.json
index e9deab93..280dcb97 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,14 +5,14 @@
   "packages": {
     "": {
       "devDependencies": {
-        "prettier": "^3.1.0",
+        "prettier": "^3.2.4",
         "prettier-plugin-go-template": "^0.0.15"
       }
     },
     "node_modules/prettier": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
-      "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
+      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
diff --git a/package.json b/package.json
index ab453ab0..63e73def 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "prettier": "^3.1.0",
+    "prettier": "^3.2.4",
     "prettier-plugin-go-template": "^0.0.15"
   }
 }
diff --git a/ui/charts.go b/ui/charts.go
new file mode 100644
index 00000000..065556ec
--- /dev/null
+++ b/ui/charts.go
@@ -0,0 +1,85 @@
+// Copyright (c) Abstract Machines
+// SPDX-License-Identifier: Apache-2.0
+
+package ui
+
+type Item struct {
+	Id      int    `json:"id"`
+	Title   string `json:"title"`
+	Content string `json:"content"`
+	Image   string `json:"image"`
+	Widget  string `json:"widget"`
+}
+
+func CreateItem() []Item {
+	items := []Item{
+		{
+			Title:   "Time Series Line Chart",
+			Content: "This is simple cartesian axis time series line chart",
+			Image:   "https://www.jqueryscript.net/images/Simple-Canvas-Based-Line-Chart-Plugin-For-jQuery-Topup.jpg",
+			Widget:  "lineChart",
+		},
+		{
+			Title:   "Time Series Bar Chart",
+			Content: "This is simple cartesian axis time series bar chart",
+			Image:   "https://sigma-docs-screenshots.s3.us-west-2.amazonaws.com/Workbooks/Visualizations/Build+a+Bar+Chart/bar-chart.png",
+			Widget:  "barChart",
+		},
+		{
+			Title:   "Simple Analogue Gauge",
+			Content: "This is a radial analogue gauge",
+			Image:   "https://www.infragistics.com/products/indigo-design/help/images/radial_gauge_inside-2@2x.png",
+			Widget:  "gauge",
+		},
+		{
+			Title:   "Pie Chart",
+			Content: "This is a pie chart",
+			Image:   "https://earthly.dev/blog/generated/assets/images/stop-using-pie-charts/pie-chart-800-a835136f5.png",
+			Widget:  "pieChart",
+		},
+		{
+			Title:   "Donut Chart",
+			Content: "This is a donut chart",
+			Image:   "https://media.geeksforgeeks.org/wp-content/uploads/20230322231450/Rplot07.png",
+			Widget:  "donut",
+		},
+		{
+			Title:   "Speed Gauge",
+			Content: "This is an analogue speed gauge",
+			Image:   "https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/5/b/5b953b24910ffe51767d97af48d8d6c9125039a8.png",
+			Widget:  "speedGauge",
+		},
+		{
+			Title:   "Range Chart",
+			Content: "This is a range chart",
+			Image:   "https://storage.googleapis.com/studio_v_0_0_2/HVUMTI2S/_desktop_preview_1655159666002.png",
+			Widget:  "stackedLineChart",
+		},
+		{
+			Title:   "Area Line Chart",
+			Content: "This is a stacked area line chart",
+			Image:   "https://i.stack.imgur.com/vTgJy.gif",
+			Widget:  "areaLineChart",
+		},
+		{
+			Title:   "Temperature Gauge",
+			Content: "This is an analogue temperature gauge",
+			Image:   "https://storage.googleapis.com/support-forums-api/attachment/thread-7015968-5764838897040940014.png",
+			Widget:  "tempGauge",
+		},
+		{
+			Title:   "Bar and Line Chart",
+			Content: "This is a dynamic data bar and line chart",
+			Image:   "https://i.stack.imgur.com/tYgjo.png",
+			Widget:  "dynamicDataChart",
+		},
+		{
+			Title:   "Horizontal Bar Chart",
+			Content: "This is a horizontal bar chart",
+			Image:   "https://datavizproject.com/wp-content/uploads/types/Bar-Chart-Horizontal.png",
+			Widget:  "horizontalBarChart",
+		},
+	}
+
+	return items
+}
diff --git a/ui/jsonObject.go b/ui/jsonObject.go
deleted file mode 100644
index 2a700e22..00000000
--- a/ui/jsonObject.go
+++ /dev/null
@@ -1,80 +0,0 @@
-// Copyright (c) Abstract Machines
-// SPDX-License-Identifier: Apache-2.0
-
-// To be Deleted. This is simulating the charts that we are going to get from the backend.
-package ui
-
-type Item struct {
-	Id      int    `json:"id"`
-	Title   string `json:"title"`
-	Content string `json:"content"`
-	Image   string `json:"image"`
-	Widget  string `json:"widget"`
-}
-
-func CreateItem() []Item {
-	items := []Item{
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image1.jpg",
-			Widget:  "lineChart",
-		},
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image2.jpg",
-			Widget:  "lineChart",
-		},
-		{
-			Title:   "Gauge",
-			Content: "This is a small sentence about a gauge",
-			Image:   "https://example.com/image3.jpg",
-			Widget:  "gauge",
-		},
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image4.jpg",
-			Widget:  "lineChart",
-		},
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image5.jpg",
-			Widget:  "lineChart",
-		},
-		{
-			Title:   "Gauge",
-			Content: "This is a small sentence about a gauge",
-			Image:   "https://example.com/image6.jpg",
-			Widget:  "gauge",
-		},
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image7.jpg",
-			Widget:  "lineChart",
-		},
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image8.jpg",
-			Widget:  "lineChart",
-		},
-		{
-			Title:   "Gauge",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image9.jpg",
-			Widget:  "gauge",
-		},
-		{
-			Title:   "Line Chart",
-			Content: "This is a small sentence about a line chart",
-			Image:   "https://example.com/image10.jpg",
-			Widget:  "lineChart",
-		},
-	}
-
-	return items
-}
diff --git a/ui/service.go b/ui/service.go
index 6e97a0fe..655a42a7 100644
--- a/ui/service.go
+++ b/ui/service.go
@@ -28,7 +28,8 @@ import (
 )
 
 const (
-	templateDir             = "ui/web/templates"
+	templatesDir            = "ui/web/templates"
+	chartTemplatesDir       = "ui/web/templates/charts"
 	enabled                 = "enabled"
 	statePending            = "pending"
 	statusAll               = "all"
@@ -125,11 +126,22 @@ var (
 		"invitations",
 
 		"dashboard",
+	}
 
-		// Modals
+	chartTemplates = []string{
 		"linechartmodal",
 		"gaugemodal",
+		"barchartmodal",
+		"piechartmodal",
+		"donutmodal",
+		"speedgaugemodal",
+		"tempgaugemodal",
+		"stackedlinechartmodal",
+		"arealinechartmodal",
+		"horizontalbarchartmodal",
+		"dynamicdatachartmodal",
 	}
+
 	ErrToken                = errors.New("failed to create token")
 	ErrTokenRefresh         = errors.New("failed to refresh token")
 	ErrFailedCreate         = errors.New("failed to create entity")
@@ -2433,7 +2445,10 @@ func parseTemplates(mfsdk sdk.SDK, templates []string) (tpl *template.Template,
 
 	var tmplFiles []string
 	for _, value := range templates {
-		tmplFiles = append(tmplFiles, templateDir+"/"+value+".html")
+		tmplFiles = append(tmplFiles, templatesDir+"/"+value+".html")
+	}
+	for _, value := range chartTemplates {
+		tmplFiles = append(tmplFiles, chartTemplatesDir+"/"+value+".html")
 	}
 	tpl, err = tpl.ParseFiles(tmplFiles...)
 	if err != nil {
diff --git a/ui/web/static/js/dashboards.js b/ui/web/static/js/dashboards.js
index 0f735a16..f6632ba5 100644
--- a/ui/web/static/js/dashboards.js
+++ b/ui/web/static/js/dashboards.js
@@ -20,7 +20,9 @@ function initGrid() {
 
 function saveLayout() {
   const itemData = grid.getItems().map((item) => ({
-    innerHTML: item.getElement().innerHTML,
+    innerHTML: item._element.innerHTML,
+    widgetID: item._element.children[1].children[0].id,
+    widgetScript: item._element.children[2].innerHTML,
   }));
 
   const gridState = {
@@ -63,6 +65,11 @@ function loadLayout(savedLayout) {
       const newItem = document.createElement("div");
       newItem.className = "item";
       newItem.innerHTML = itemData.innerHTML.trim();
+      var scriptTag = document.createElement("script");
+      scriptTag.type = "text/javascript";
+      scriptTag.defer = true;
+      scriptTag.innerHTML = itemData.widgetScript;
+      newItem.appendChild(scriptTag);
       const item = grid.add(newItem);
     });
 
@@ -92,6 +99,11 @@ function editGrid(grid) {
         const newItem = document.createElement("div");
         newItem.className = "item";
         newItem.innerHTML = itemData.innerHTML.trim();
+        var scriptTag = document.createElement("script");
+        scriptTag.type = "text/javascript";
+        scriptTag.defer = true;
+        scriptTag.innerHTML = itemData.widgetScript;
+        newItem.appendChild(scriptTag);
         const item = grid.add(newItem);
       });
       grid.layout(gridState.layout);
diff --git a/ui/web/templates/charts/arealinechartmodal.html b/ui/web/templates/charts/arealinechartmodal.html
new file mode 100644
index 00000000..18dc5650
--- /dev/null
+++ b/ui/web/templates/charts/arealinechartmodal.html
@@ -0,0 +1,185 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "arealinechartmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="areaLineChartModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="areaLineChartModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="areaLineChartModalLabel">Area line charts</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-areaLineChart-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-areaLineChart-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // area line chart form
+    document.getElementById("create-areaLineChart-button").addEventListener("click", function () {
+      var form = document.getElementById("create-areaLineChart-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "arealinechart-" + Date.now();
+      var widgetScript = `
+      var areaLineChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 300,
+            });
+            var option = {
+                tooltip: {
+                  trigger: 'axis',
+                  axisPointer: {
+                    type: 'cross',
+                    label: {
+                      backgroundColor: '#6a7985'
+                    }
+                  }
+                },
+                legend: {
+                  data: ['voltage', 'current', 'temperature', 'pressue']
+                },
+                grid: {
+                  left: '3%',
+                  right: '4%',
+                  bottom: '3%',
+                  containLabel: true
+                },
+                xAxis: [
+                  {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['thing1', 'thing2', 'thing3', 'thing4', 'thing5', 'thing6', 'thing7']
+                  }
+                ],
+                yAxis: [
+                  {
+                    type: 'value'
+                  }
+                ],
+                series: [
+                  {
+                    name: 'voltage',
+                    type: 'line',
+                    stack: 'Total',
+                    areaStyle: {},
+                    emphasis: {
+                      focus: 'series'
+                    },
+                    data: [120, 132, 101, 134, 90, 230, 210]
+                  },
+                  {
+                    name: 'current',
+                    type: 'line',
+                    stack: 'Total',
+                    areaStyle: {},
+                    emphasis: {
+                      focus: 'series'
+                    },
+                    data: [220, 182, 191, 234, 290, 330, 310]
+                  },
+                  {
+                    name: 'temperature',
+                    type: 'line',
+                    stack: 'Total',
+                    areaStyle: {},
+                    emphasis: {
+                      focus: 'series'
+                    },
+                    data: [150, 232, 201, 154, 190, 330, 410]
+                  },
+                  {
+                    name: 'pressure',
+                    type: 'line',
+                    stack: 'Total',
+                    areaStyle: {},
+                    emphasis: {
+                      focus: 'series'
+                    },
+                    data: [320, 332, 301, 334, 390, 330, 320]
+                  },
+                ]
+              };
+
+            areaLineChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/charts/barchartmodal.html b/ui/web/templates/charts/barchartmodal.html
new file mode 100644
index 00000000..e1c2be93
--- /dev/null
+++ b/ui/web/templates/charts/barchartmodal.html
@@ -0,0 +1,126 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "barchartmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="barChartModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="barChartModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="barChartModalLabel">Time series bar chart</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-barChart-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-barChart-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // bar chart form
+    document.getElementById("create-barChart-button").addEventListener("click", function () {
+      var form = document.getElementById("create-barChart-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "barchart-" + Date.now();
+      var widgetScript = `
+      var barChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 200,
+            });
+            var option = {
+                xAxis: {
+                  type: 'category',
+                  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                  type: 'value'
+                },
+                series: [
+                  {
+                    data: [120, 200, 150, 80, 70, 110, 130],
+                    type: 'bar'
+                  }
+                ]
+            };
+
+            barChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/charts/donutmodal.html b/ui/web/templates/charts/donutmodal.html
new file mode 100644
index 00000000..5517e73f
--- /dev/null
+++ b/ui/web/templates/charts/donutmodal.html
@@ -0,0 +1,149 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "donutmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="donutModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="donutModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="donutModalLabel">Donut chart</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-donut-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-donut-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // donut form
+    document.getElementById("create-donut-button").addEventListener("click", function () {
+      var form = document.getElementById("create-donut-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "donut-" + Date.now();
+      var widgetScript = `
+      var donut = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 200,
+            });
+            var option = {
+                tooltip: {
+                  trigger: 'item'
+                },
+                legend: {
+                  top: '5%',
+                  left: 'center'
+                },
+                series: [
+                  {
+                    name: 'Access From',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                      show: false,
+                      position: 'center'
+                    },
+                    emphasis: {
+                      label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                      }
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    data: [
+                      { value: 1048, name: 'Thing1' },
+                      { value: 735, name: 'Thing2' },
+                      { value: 580, name: 'Thing3' },
+                      { value: 484, name: 'Thing4' },
+                      { value: 300, name: 'Thing5' }
+                    ]
+                  }
+                ]
+            };
+
+            donut.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/charts/dynamicdatachartmodal.html b/ui/web/templates/charts/dynamicdatachartmodal.html
new file mode 100644
index 00000000..b45e302c
--- /dev/null
+++ b/ui/web/templates/charts/dynamicdatachartmodal.html
@@ -0,0 +1,252 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "dynamicdatachartmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="dynamicDataChartModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="dynamicDataChartModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="dynamicDataChartModalLabel">Dynamic Data chart</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-dynamicDataChart-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-dynamicDataChart-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // horizontal bar chart form
+    document
+      .getElementById("create-dynamicDataChart-button")
+      .addEventListener("click", function () {
+        var form = document.getElementById("create-dynamicDataChart-form");
+        // Create an object to store the form data
+        var formData = {};
+
+        // Serialize the form data into the object
+        for (var i = 0; i < form.elements.length; i++) {
+          var e = form.elements[i];
+          if (e.type !== "submit" && e.type !== "button") {
+            formData[e.name] = e.value;
+          }
+        }
+        form.reset();
+
+        var widgetID = "dynamicDatachart-" + Date.now();
+        var widgetScript = `
+        var dynamicDataChart = echarts.init(document.getElementById("${widgetID}"), null, {
+                width: 600,
+                height: 600,
+                });
+                var app = {};
+                var categories = (function () {
+                    let now = new Date();
+                    let res = [];
+                    let len = 10;
+                    while (len--) {
+                        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+                        now = new Date(+now - 2000);
+                    }
+                    return res;
+                })();
+                var categories2 = (function () {
+                    let res = [];
+                    let len = 10;
+                    while (len--) {
+                        res.push(10 - len - 1);
+                    }
+                    return res;
+                })();
+                var data = (function () {
+                    
+                    let res = [];
+                    let len = 10;
+                    while (len--) {
+                        res.push(Math.round(Math.random() * 1000));
+                    }
+                    return res;
+                })();
+                var data2 = (function () {
+                    let res = [];
+                    let len = 0;
+                    while (len < 10) {
+                        res.push(+(Math.random() * 10 + 5).toFixed(1));
+                        len++;
+                    }
+                    return res;
+                })();
+                var option = {
+                    title: {
+                        text: 'Dynamic Data'
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                                type: 'cross',
+                            label: {
+                                backgroundColor: '#283b56'
+                            }
+                    }
+                    },
+                    legend: {},
+                    toolbox: {
+                        show: true,
+                    feature: {
+                        dataView: { readOnly: false },
+                        restore: {},
+                        saveAsImage: {}
+                    }
+                    },
+                    dataZoom: {
+                        show: false,
+                        start: 0,
+                        end: 100
+                    },
+                    xAxis: [
+                        {
+                            type: 'category',
+                            boundaryGap: true,
+                            data: categories
+                        },
+                        {
+                            type: 'category',
+                            boundaryGap: true,
+                            data: categories2
+                        }
+                    ],
+                    yAxis: [
+                        {
+                            type: 'value',
+                            scale: true,
+                            name: 'Price',
+                            max: 30,
+                            min: 0,
+                            boundaryGap: [0.2, 0.2]
+                        },
+                        {
+                            type: 'value',
+                            scale: true,
+                            name: 'Order',
+                            max: 1200,
+                            min: 0,
+                            boundaryGap: [0.2, 0.2]
+                        }
+                    ],
+                    series: [
+                        {
+                            name: 'Dynamic Bar',
+                            type: 'bar',
+                            xAxisIndex: 1,
+                            yAxisIndex: 1,
+                            data: data
+                        },
+                        {
+                            name: 'Dynamic Line',
+                            type: 'line',
+                            data: data2
+                        }
+                    ]
+                };
+                app.count = 11;
+                setInterval(function () {
+                    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
+                    data.shift();
+                    data.push(Math.round(Math.random() * 1000));
+                    data2.shift();
+                    data2.push(+(Math.random() * 10 + 5).toFixed(1));
+                    categories.shift();
+                    categories.push(axisData);
+                    categories2.shift();
+                    categories2.push(app.count++);
+                    dynamicDataChart.setOption({
+                        xAxis: [
+                            {
+                                data: categories
+                            },
+                            {
+                                data: categories2
+                            }
+                        ],
+                        series: [
+                            {
+                                data: data
+                            },
+                            {
+                                data: data2
+                            }
+                        ]
+                    });
+                }, 2100);
+
+                dynamicDataChart.setOption(option);`;
+
+        addWidget(widgetID, widgetScript);
+      });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/gaugemodal.html b/ui/web/templates/charts/gaugemodal.html
similarity index 79%
rename from ui/web/templates/gaugemodal.html
rename to ui/web/templates/charts/gaugemodal.html
index 81c37c47..750f9ae0 100644
--- a/ui/web/templates/gaugemodal.html
+++ b/ui/web/templates/charts/gaugemodal.html
@@ -95,7 +95,38 @@ <h5 class="modal-title" id="gaugeModalLabel">Analogue Gauge</h5>
         }
       }
       form.reset();
-      addWidget(JSON.stringify(formData, "gauge"));
+
+      var widgetID = "gauge-" + Date.now();
+      var widgetScript = `
+      var gaugeChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 300,
+              height: 300,
+            });
+            var option = {
+              tooltip: {
+                formatter: "{a} <br/>{b} : {c}%",
+              },
+              series: [
+                {
+                  name: "",
+                  type: "gauge",
+                  progress: {
+                    show: true,
+                  },
+                  detail: { valueAnimation: true, formatter: "{value}" },
+                  data: [
+                    {
+                      value: 55,
+                      name: "Pressure",
+                    },
+                  ],
+                },
+              ],
+            };
+
+            gaugeChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
     });
   </script>
 {{ end }}
diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
new file mode 100644
index 00000000..09664d38
--- /dev/null
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -0,0 +1,150 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "horizontalbarchartmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="horizontalBarChartModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="horizontalBarChartModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal bar chart</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-horizontalBarChart-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-horizontalBarChart-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // horizontal bar chart form
+    document
+      .getElementById("create-horizontalBarChart-button")
+      .addEventListener("click", function () {
+        var form = document.getElementById("create-horizontalBarChart-form");
+        // Create an object to store the form data
+        var formData = {};
+
+        // Serialize the form data into the object
+        for (var i = 0; i < form.elements.length; i++) {
+          var e = form.elements[i];
+          if (e.type !== "submit" && e.type !== "button") {
+            formData[e.name] = e.value;
+          }
+        }
+        form.reset();
+
+        var widgetID = "horizontalBarchart-" + Date.now();
+        var widgetScript = `
+      var horizontalBarChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 600,
+              height: 400,
+            });
+            var option = {
+                dataset: {
+                  source: [
+                    ['score', 'amount', 'product'],
+                    [79.3,85212, 'thing1'],
+                    [57.1, 78254, 'thing2'],
+                    [14.4, 41032, 'thing3'],
+                    [30.1, 12755, 'thing4'],
+                    [18.7, 20145, 'thing5'],
+                    [88.1, 89146, 'thing6'],
+                  ]
+                },
+                grid: { containLabel: true },
+                xAxis: { name: 'amount' },
+                yAxis: { type: 'category' },
+                visualMap: {
+                  orient: 'horizontal',
+                  left: 'center',
+                  min: 10,
+                  max: 100,
+                  text: ['High temperature', 'Low temperature'],
+                  // Map the score column to color
+                  dimension: 0,
+                  inRange: {
+                    color: ['#65B581', '#FFCE34', '#FD665F']
+                  }
+                },
+                series: [
+                  {
+                    type: 'bar',
+                    encode: {
+                      x: 'amount',
+                      y: 'product'
+                    }
+                  }
+                ]
+              };
+
+            horizontalBarChart.setOption(option);`;
+
+        addWidget(widgetID, widgetScript);
+      });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
similarity index 82%
rename from ui/web/templates/linechartmodal.html
rename to ui/web/templates/charts/linechartmodal.html
index dfcdda3a..9ba8fbcb 100644
--- a/ui/web/templates/linechartmodal.html
+++ b/ui/web/templates/charts/linechartmodal.html
@@ -95,7 +95,32 @@ <h5 class="modal-title" id="lineChartModalLabel">Time series line charts</h5>
         }
       }
       form.reset();
-      addWidget(JSON.stringify(formData));
+
+      var widgetID = "linechart-" + Date.now();
+      var widgetScript = `
+      var lineChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 200,
+            });
+            var option = {
+              xAxis: {
+                type: 'category',
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  data: [150, 230, 224, 218, 135, 147, 260],
+                  type: 'line'
+                }
+              ]
+            };
+
+            lineChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
     });
   </script>
 {{ end }}
diff --git a/ui/web/templates/charts/piechartmodal.html b/ui/web/templates/charts/piechartmodal.html
new file mode 100644
index 00000000..3a160c2c
--- /dev/null
+++ b/ui/web/templates/charts/piechartmodal.html
@@ -0,0 +1,146 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "piechartmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="pieChartModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="pieChartModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="pieChartModalLabel">Pie chart</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-pieChart-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-pieChart-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // pie chart form
+    document.getElementById("create-pieChart-button").addEventListener("click", function () {
+      var form = document.getElementById("create-pieChart-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "piechart-" + Date.now();
+      var widgetScript = `
+      var pieChart = echarts.init(document.getElementById("${widgetID}"), null, {
+                width: 500,
+                height: 300,
+            });
+            var option = {
+                title: {
+                    text: 'active channels per thing',
+                    subtext: 'Fake Data',
+                    left: 'center'
+                },
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'left'
+                },
+                series: [
+                    {
+                    name: 'Access From',
+                    type: 'pie',
+                    radius: '50%',
+                    data: [
+                        { value: 1048, name: 'thing1' },
+                        { value: 735, name: 'thing2' },
+                        { value: 580, name: 'thing3' },
+                        { value: 484, name: 'thing4' },
+                        { value: 300, name: 'thing5' }
+                    ],
+                    emphasis: {
+                        itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                    }
+                ]
+            };
+
+            pieChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/charts/speedgaugemodal.html b/ui/web/templates/charts/speedgaugemodal.html
new file mode 100644
index 00000000..05fd0b1c
--- /dev/null
+++ b/ui/web/templates/charts/speedgaugemodal.html
@@ -0,0 +1,177 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "speedgaugemodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="speedGaugeModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="speedGaugeModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="speedGaugeModalLabel">Analogue Speed Gauge</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-speedGauge-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              data-bs-dismiss="modal"
+              id="create-speedGauge-button"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Speed gauge form
+    document.getElementById("create-speedGauge-button").addEventListener("click", function () {
+      var form = document.getElementById("create-speedGauge-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "speedgauge-" + Date.now();
+      var widgetScript = `
+      var speedGaugeChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 500,
+            });
+            var option = {
+                series: [
+                  {
+                    type: 'gauge',
+                    axisLine: {
+                      lineStyle: {
+                        width: 30,
+                        color: [
+                          [0.3, '#67e0e3'],
+                          [0.7, '#37a2da'],
+                          [1, '#fd666d']
+                        ]
+                      }
+                    },
+                    pointer: {
+                      itemStyle: {
+                        color: 'auto'
+                      }
+                    },
+                    axisTick: {
+                      distance: -30,
+                      length: 8,
+                      lineStyle: {
+                        color: '#fff',
+                        width: 2
+                      }
+                    },
+                    splitLine: {
+                      distance: -30,
+                      length: 30,
+                      lineStyle: {
+                        color: '#fff',
+                        width: 4
+                      }
+                    },
+                    axisLabel: {
+                      color: 'inherit',
+                      distance: 40,
+                      fontSize: 20
+                    },
+                    detail: {
+                      valueAnimation: true,
+                      formatter: '{value} km/h',
+                      color: 'inherit'
+                    },
+                    data: [
+                      {
+                        value: 25
+                      }
+                    ]
+                  }
+                ]
+              };
+              setInterval(function () {
+                speedGaugeChart.setOption({
+                  series: [
+                    {
+                      data: [
+                        {
+                          value: +(Math.random() * 100).toFixed(2)
+                        }
+                      ]
+                    }
+                  ]
+                });
+              }, 2000);
+
+            speedGaugeChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/charts/stackedlinechartmodal.html b/ui/web/templates/charts/stackedlinechartmodal.html
new file mode 100644
index 00000000..451d796b
--- /dev/null
+++ b/ui/web/templates/charts/stackedlinechartmodal.html
@@ -0,0 +1,158 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "stackedlinechartmodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="stackedLineChartModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="stackedLineChartModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="stackedLineChartModalLabel">Stacked line charts</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-stackedLineChart-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              id="create-stackedLineChart-button"
+              data-bs-dismiss="modal"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Stacked line chart form
+    document.getElementById("create-stackedLineChart-button").addEventListener("click", function () {
+      var form = document.getElementById("create-stackedLineChart-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "stackedlinechart-" + Date.now();
+      var widgetScript = `
+      var stackedLineChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 300,
+            });
+            var option = {
+                tooltip: {
+                  trigger: 'axis'
+                },
+                legend: {
+                  data: ['current', 'voltage', 'temperature']
+                },
+                grid: {
+                  left: '3%',
+                  right: '4%',
+                  bottom: '3%',
+                  containLabel: true
+                },
+                toolbox: {
+                  feature: {
+                    saveAsImage: {}
+                  }
+                },
+                xAxis: {
+                  type: 'category',
+                  boundaryGap: false,
+                  data: ['Thing1', 'Thing2', 'Thing3', 'Thing4', 'Thing5', 'Thing6', 'Thing7']
+                },
+                yAxis: {
+                  type: 'value'
+                },
+                series: [
+                  {
+                    name: 'current',
+                    type: 'line',
+                    stack: 'Total',
+                    data: [120, 132, 101, 134, 90, 230, 210]
+                  },
+                  {
+                    name: 'voltage',
+                    type: 'line',
+                    stack: 'Total',
+                    data: [220, 182, 191, 234, 290, 330, 310]
+                  },
+                  {
+                    name: 'temperature',
+                    type: 'line',
+                    stack: 'Total',
+                    data: [150, 232, 201, 154, 190, 330, 410]
+                  },
+                ]
+              };
+
+            stackedLineChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/charts/tempgaugemodal.html b/ui/web/templates/charts/tempgaugemodal.html
new file mode 100644
index 00000000..06323d28
--- /dev/null
+++ b/ui/web/templates/charts/tempgaugemodal.html
@@ -0,0 +1,241 @@
+<!-- Copyright (c) Abstract Machines
+SPDX-License-Identifier: Apache-2.0 -->
+
+{{ define "tempgaugemodal" }}
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="tempGaugeModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="tempGaugeModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="tempGaugeModalLabel">Analogue Gauge</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <form id="create-tempGauge-form">
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="title" class="form-label">Title</label>
+              <input
+                type="text"
+                class="form-control"
+                name="title"
+                id="title"
+                placeholder="Enter the chart title"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="channel-id" class="form-label">Channel ID</label>
+              <input
+                type="text"
+                class="form-control mb-3"
+                name="channel"
+                id="channel-id"
+                placeholder="Enter channel ID"
+              />
+            </div>
+            <div class="mb-3">
+              <label for="x-axis" class="form-label">Select x-axis Type</label>
+              <select class="form-select mb-3" name="xAxisType" id="x-axis">
+                <option value="" disabled>Select x-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label for="y-axis" class="form-label">Select y-axis Type</label>
+              <select class="form-select mb-3" name="yAxisType" id="y-axis">
+                <option value="" disabled>Select y-axis Type</option>
+                <option value="value">Value</option>
+                <option value="category">Category</option>
+                <option value="time">Time</option>
+                <option value="log">Log</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button
+              type="button"
+              class="btn body-button"
+              data-bs-dismiss="modal"
+              id="create-tempGauge-button"
+            >
+              Create Chart
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Temperature gauge form
+    document.getElementById("create-tempGauge-button").addEventListener("click", function () {
+      var form = document.getElementById("create-tempGauge-form");
+      // Create an object to store the form data
+      var formData = {};
+
+      // Serialize the form data into the object
+      for (var i = 0; i < form.elements.length; i++) {
+        var e = form.elements[i];
+        if (e.type !== "submit" && e.type !== "button") {
+          formData[e.name] = e.value;
+        }
+      }
+      form.reset();
+
+      var widgetID = "tempgauge-" + Date.now();
+      var widgetScript = `
+      var tempGaugeChart = echarts.init(document.getElementById("${widgetID}"), null, {
+              width: 500,
+              height: 500,
+            });
+            var option = {
+                series: [
+                  {
+                    type: 'gauge',
+                    center: ['50%', '60%'],
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max: 60,
+                    splitNumber: 12,
+                    itemStyle: {
+                      color: '#FFAB91'
+                    },
+                    progress: {
+                      show: true,
+                      width: 30
+                    },
+                    pointer: {
+                      show: false
+                    },
+                    axisLine: {
+                      lineStyle: {
+                        width: 30
+                      }
+                    },
+                    axisTick: {
+                      distance: -45,
+                      splitNumber: 5,
+                      lineStyle: {
+                        width: 2,
+                        color: '#999'
+                      }
+                    },
+                    splitLine: {
+                      distance: -52,
+                      length: 14,
+                      lineStyle: {
+                        width: 3,
+                        color: '#999'
+                      }
+                    },
+                    axisLabel: {
+                      distance: -20,
+                      color: '#999',
+                      fontSize: 20
+                    },
+                    anchor: {
+                      show: false
+                    },
+                    title: {
+                      show: false
+                    },
+                    detail: {
+                      valueAnimation: true,
+                      width: '60%',
+                      lineHeight: 40,
+                      borderRadius: 8,
+                      offsetCenter: [0, '-15%'],
+                      fontSize: 60,
+                      fontWeight: 'bolder',
+                      formatter: '{value} °C',
+                      color: 'inherit'
+                    },
+                    data: [
+                      {
+                        value: 20
+                      }
+                    ]
+                  },
+                  {
+                    type: 'gauge',
+                    center: ['50%', '60%'],
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max: 60,
+                    itemStyle: {
+                      color: '#FD7347'
+                    },
+                    progress: {
+                      show: true,
+                      width: 8
+                    },
+                    pointer: {
+                      show: false
+                    },
+                    axisLine: {
+                      show: false
+                    },
+                    axisTick: {
+                      show: false
+                    },
+                    splitLine: {
+                      show: false
+                    },
+                    axisLabel: {
+                      show: false
+                    },
+                    detail: {
+                      show: false
+                    },
+                    data: [
+                      {
+                        value: 37
+                      }
+                    ]
+                  }
+                ]
+              };
+              setInterval(function () {
+                const random = +(Math.random() * 60).toFixed(2);
+                tempGaugeChart.setOption({
+                  series: [
+                    {
+                      data: [
+                        {
+                          value: random
+                        }
+                      ]
+                    },
+                    {
+                      data: [
+                        {
+                          value: random
+                        }
+                      ]
+                    }
+                  ]
+                });
+              }, 2000);
+
+            tempGaugeChart.setOption(option);`;
+
+      addWidget(widgetID, widgetScript);
+    });
+  </script>
+{{ end }}
diff --git a/ui/web/templates/dashboard.html b/ui/web/templates/dashboard.html
index 70d43472..d4e5d5a8 100644
--- a/ui/web/templates/dashboard.html
+++ b/ui/web/templates/dashboard.html
@@ -8,6 +8,12 @@
       {{ template "header" }}
       <title>Dashboard</title>
       <link rel="stylesheet" href="/css/dashboards.css" />
+      <script
+        src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"
+        integrity="sha512-EmNxF3E6bM0Xg1zvmkeYD3HDBeGxtsG92IxFt1myNZhXdCav9MzvuH/zNMBU1DmIPN6njrhX1VTbqdJxQ2wHDg=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer"
+      ></script>
     </head>
     <body>
       {{ template "navbar" . }}
@@ -82,8 +88,17 @@ <h5 id="widgetsCanvasLabel">Widgets</h5>
                 </div>
               </div>
 
-              {{ template "gaugemodal" . }}
-              {{ template "linechartmodal" . }}
+              {{ template "gaugemodal" }}
+              {{ template "linechartmodal" }}
+              {{ template "barchartmodal" }}
+              {{ template "piechartmodal" }}
+              {{ template "donutmodal" }}
+              {{ template "speedgaugemodal" }}
+              {{ template "tempgaugemodal" }}
+              {{ template "stackedlinechartmodal" }}
+              {{ template "arealinechartmodal" }}
+              {{ template "horizontalbarchartmodal" }}
+              {{ template "dynamicdatachartmodal" }}
             </div>
           </div>
         </div>
@@ -94,7 +109,7 @@ <h5 id="widgetsCanvasLabel">Widgets</h5>
       <script>
         var grid = initGrid();
 
-        function addWidget(data) {
+        function addWidget(widgetID, widgetScript) {
           // Create a new grid item
           const newItem = document.createElement("div");
           newItem.className = "item";
@@ -104,8 +119,14 @@ <h5 id="widgetsCanvasLabel">Widgets</h5>
               <i class="fas fa-trash-can"></i>
             </button>
             <div class="item-content">
-              ${data}
-            </div>`;
+              <div id="${widgetID}"></div>
+            </div>
+            `;
+          var scriptTag = document.createElement("script");
+          scriptTag.type = "text/javascript";
+          scriptTag.defer = true;
+          scriptTag.innerHTML = widgetScript;
+          newItem.appendChild(scriptTag);
 
           grid.add(newItem);
         }