diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 294b9242..a2169fc7 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -798,14 +798,14 @@ class HorizontalBarChart extends Echart {
 
       function getInterval(chartData) {
         const interval = chartData.to - chartData.from;
-        const nanosecondsPerSecond = 1e3;
+        const millisecondsPerSecond = 1e3;
         const secondsPerMinute = 60;
         const minutesPerHour = 60;
         let minutes = 0;
         let hours = 0;
         let intervalString = "";
 
-        let seconds = parseInt(interval) / nanosecondsPerSecond;
+        let seconds = parseInt(interval) / millisecondsPerSecond;
         intervalString = Math.ceil(seconds).toString() +'s';
         if (seconds >= secondsPerMinute) {
           minutes = seconds/ secondsPerMinute;
diff --git a/ui/web/templates/charts/horizontalbarchartmodal.html b/ui/web/templates/charts/horizontalbarchartmodal.html
index 5191e335..521e001b 100644
--- a/ui/web/templates/charts/horizontalbarchartmodal.html
+++ b/ui/web/templates/charts/horizontalbarchartmodal.html
@@ -18,7 +18,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
           <button
             type="button"
             class="btn-close"
-            onclick="resetForm();"
+            onclick="closeForm();"
             aria-label="Close"
           ></button>
         </div>
@@ -65,7 +65,7 @@ <h5 class="modal-title" id="horizontalBarChartModalLabel">Horizontal Bar Chart</
               >
                 <div class="table-responsive-md mb-3 p-2 border rounded">
                   <h5>Data Source</h5>
-                  <table class="table" id="linechart-data">
+                  <table class="table" id="horizontalbarchart-data">
                     <thead>
                       <tr>
                         <th scope="col">Channel</th>
@@ -193,7 +193,7 @@ <h5>Data Source</h5>
           </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" onclick="resetForm();">Close</button>
+          <button type="button" class="btn btn-secondary" onclick="closeForm();">Close</button>
           <button type="button" class="btn body-button" id="create-horizontalBarChart-button">
             Create Chart
           </button>
@@ -203,10 +203,10 @@ <h5>Data Source</h5>
   </div>
   <script>
     // horizontal bar chart form
+    const form = document.getElementById("create-horizontalBarChart-form");
     document
       .getElementById("create-horizontalBarChart-button")
       .addEventListener("click", function () {
-        const form = document.getElementById("create-horizontalBarChart-form");
         if (!form.checkValidity()) {
           form.classList.add("was-validated");
           return;
@@ -217,25 +217,35 @@ <h5>Data Source</h5>
         const channels = [];
         const things = [];
         let formData = new FormData(form);
-        for (var pair of formData.entries()) {
-          switch (pair[0]) {
+        for (let [name, value] of formData) {
+          switch (name) {
             case "startTime":
             case "stopTime":
-              const inputDate = new Date(pair[1]);
-              chartData[pair[0]] = inputDate.getTime();
+              const inputDate = new Date(value);
+              chartData[name] = inputDate.getTime();
               break;
             case "channel":
-              channels.push(pair[1]);
+              channels.push(value);
               break;
             case "thing":
-              things.push(pair[1]);
+              things.push(value);
               break;
             default:
-              chartData[pair[0]] = pair[1];
+              chartData[name] = value;
               break;
           }
         }
 
+        if (chartData.stopTime <= chartData.startTime) {
+          const invalidTimeFeedback = form.querySelector(".invalid-time");
+          invalidTimeFeedback.innerHTML = "Stop time should be greater than start time";
+          invalidTimeFeedback.style.color = "red";
+          const invalidTimeInput = form.querySelector("#stop-time");
+          invalidTimeInput.classList.remove("was-validated");
+          invalidTimeInput.classList.add("is-invalid");
+          return;
+        }
+
         var widgetID = "horizontalBarchart-" + Date.now();
 
         chartData["Type"] = "horizontalBarChart";
@@ -243,19 +253,21 @@ <h5>Data Source</h5>
         chartData["things"] = things;
         addWidget(chartData, widgetID);
         metadataBuffer[widgetID] = chartData;
-        resetForm();
+        closeForm();
       });
 
-    function resetForm() {
-      const form = document.getElementById("create-horizontalBarChart-form");
+    function closeForm() {
       form.classList.remove("was-validated");
+      form.querySelector(".invalid-time").innerHTML = "";
+      form.querySelector("#stop-time").classList.remove("is-invalid");
       form.reset();
+      resetTable();
       bootstrap.Modal.getInstance(document.getElementById("horizontalBarChartModal")).hide();
     }
 
     function addRow() {
       const uuidPattern = "{{ .UUIDPattern }}";
-      const table = document.getElementById("linechart-data");
+      const table = document.getElementById("horizontalbarchart-data");
       const newRow = table.insertRow(-1);
       newRow.innerHTML = ` <td>
             <input type="text" pattern="${uuidPattern}" class="form-control" name="channel"
@@ -276,5 +288,33 @@ <h5>Data Source</h5>
       const row = button.parentNode.parentNode;
       row.parentNode.removeChild(row);
     }
+
+    function resetTable() {
+      const table = document.getElementById("horizontalbarchart-data");
+      table.innerHTML = ` <thead>
+        <tr>
+          <th scope="col">Channel</th>
+          <th scope="col">Thing</th>
+          <th scope="col"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <input type="text" pattern="{{ .UUIDPattern }}" class="form-control" name="channel"
+              placeholder="channel ID" required  />
+          </td>
+          <td>
+            <input type="text" pattern="{{ .UUIDPattern }}" class="form-control" name="thing"
+              placeholder="thing ID" required  />
+          </td>
+          <td class="text-center">
+            <button type="button" class="btn btn-sm" onclick="removeRow(this)">
+              <i class="fas fa-trash-alt"></i>
+            </button>
+          </td>
+        </tr>
+      </tbody>`;
+    }
   </script>
 {{ end }}