diff --git a/src/html/pages/index.astro b/src/html/pages/index.astro
index 2d24037eb..ac3eef6af 100644
--- a/src/html/pages/index.astro
+++ b/src/html/pages/index.astro
@@ -15,6 +15,9 @@ const page = 'index'
 <html lang="en">
   <head>
     <Head title={title} path={path} />
+
+    <!-- apexcharts -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
   </head>
 
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@@ -109,36 +112,18 @@ const page = 'index'
             <div class="row">
               <!-- Start col -->
               <div class="col-lg-7">
-                <!-- Custom tabs (Charts with tabs)-->
                 <div class="card">
                   <div class="card-header">
-                    <h3 class="card-title">
-                      <i class="fa-solid fa-chart-pie me-1"></i>
-                      Sales
-                    </h3>
+                    <h3 class="card-title">Sales Value</h3>
+
                     <div class="card-tools">
-                      <ul class="nav nav-pills ms-auto">
-                        <li class="nav-item">
-                          <a class="nav-link active" href="#revenue-chart" data-bs-toggle="tab">Area</a>
-                        </li>
-                        <li class="nav-item">
-                          <a class="nav-link" href="#sales-chart" data-bs-toggle="tab">Donut</a>
-                        </li>
-                      </ul>
+
                     </div>
-                  </div><!-- /.card-header -->
+                  </div>
+
                   <div class="card-body">
-                    <div class="tab-content p-0">
-                      <!-- Morris chart - Sales -->
-                      <div class="chart tab-pane active" id="revenue-chart"
-                          style="position: relative; height: 300px;">
-                          <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>
-                      </div>
-                      <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
-                        <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>
-                      </div>
-                    </div>
-                  </div><!-- /.card-body -->
+                    <div id="revenue-chart"></div>
+                  </div>
                 </div>
                 <!-- /.card -->
 
@@ -360,114 +345,53 @@ const page = 'index'
 
     <!-- OPTIONAL SCRIPTS -->
 
+    <!-- apexcharts -->
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
+
     <!-- ChartJS -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
     <script is:inline>
       // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
       // IT'S ALL JUST JUNK FOR DEMO
       // ++++++++++++++++++++++++++++++++++++++++++
 
-      /* Chart.js Charts */
-      // Sales chart
-      (function () {
-        'use strict'
-
-        var salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
-
-        var salesChartData = {
-          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-          datasets: [
-            {
-              label: 'Digital Goods',
-              backgroundColor: 'rgba(60,141,188,0.9)',
-              borderColor: 'rgba(60,141,188,0.8)',
-              fill: true,
-              tension: 0.4,
-              pointRadius: 0,
-              pointColor: '#3b8bba',
-              pointStrokeColor: 'rgba(60,141,188,1)',
-              pointHighlightFill: '#fff',
-              pointHighlightStroke: 'rgba(60,141,188,1)',
-              data: [28, 48, 40, 19, 86, 27, 90]
-            },
-            {
-              label: 'Electronics',
-              backgroundColor: 'rgba(210, 214, 222, 1)',
-              borderColor: 'rgba(210, 214, 222, 1)',
-              fill: true,
-              tension: 0.4,
-              pointRadius: 0,
-              pointColor: 'rgba(210, 214, 222, 1)',
-              pointStrokeColor: '#c1c7d1',
-              pointHighlightFill: '#fff',
-              pointHighlightStroke: 'rgba(220,220,220,1)',
-              data: [65, 59, 80, 81, 56, 55, 40]
-            }
-          ]
-        }
-
-        var salesChartOptions = {
-          maintainAspectRatio: false,
-          responsive: true,
-          plugins: {
-            legend: {
-              display: false
-            }
+      var sales_chart_options = {
+          series: [{
+          name: 'Digital Goods',
+          data: [28, 48, 40, 19, 86, 27, 90]
+        },{
+          name: 'Electronics',
+          data: [65, 59, 80, 81, 56, 55, 40]
+        }],
+        chart: {
+          height: 300,
+          type: 'area',
+          toolbar: {
+            show: false,
           },
-          scales: {
-            xAxes: {
-              gridLines: {
-                display: false
-              }
-            },
-            yAxes: {
-              gridLines: {
-                display: false
-              }
-            }
-          }
-        }
-
-        // This will get the first returned node in the js collection.
-        var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
-          type: 'line',
-          data: salesChartData,
-          options: salesChartOptions
-        })
-
-        // Donut Chart
-        var pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
-        var pieData = {
-          labels: [
-            'Instore Sales',
-            'Download Sales',
-            'Mail-Order Sales'
-          ],
-          datasets: [
-            {
-              data: [30, 12, 20],
-              backgroundColor: ['#f56954', '#00a65a', '#f39c12']
-            }
-          ]
-        }
-        var pieOptions = {
-          plugins: {
-            legend: {
-              display: false
-            }
+        },
+        legend: {
+          show: false
+        },
+        colors:['#0d6efd', '#20c997'],
+        dataLabels: {
+          enabled: false,
+        },
+        stroke: {
+          curve: 'smooth'
+        },
+        xaxis: {
+          type: 'datetime',
+          categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
+        },
+        tooltip: {
+          x: {
+            format: 'MMMM yyyy'
           },
-          maintainAspectRatio: false,
-          responsive: true
-        }
-        // Create pie or douhnut chart
-        // You can switch between pie and douhnut using the method below.
-        // eslint-disable-next-line no-unused-vars
-        var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
-          type: 'doughnut',
-          data: pieData,
-          options: pieOptions
-        })
-      })()
+        },
+      };
+
+      var sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
+      sales_chart.render();
     </script>
   </body>
 </html>
diff --git a/src/html/pages/index2.astro b/src/html/pages/index2.astro
index 00f12f6b3..9f162ff61 100644
--- a/src/html/pages/index2.astro
+++ b/src/html/pages/index2.astro
@@ -14,6 +14,9 @@ const page = 'index2'
 <html lang="en">
   <head>
     <Head title={title} path={path} />
+
+    <!-- apexcharts -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
   </head>
 
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@@ -138,11 +141,7 @@ const page = 'index2'
                           <strong>Sales: 1 Jan, 2023 - 30 Jul, 2023</strong>
                         </p>
 
-                        <div class="chart">
-                          <!-- Sales Chart Canvas -->
-                          <canvas id="salesChart" style="height: 180px;"></canvas>
-                        </div>
-                        <!-- /.chart-responsive -->
+                        <div id="sales-chart"></div>
                       </div>
                       <!-- /.col -->
                       <div class="col-md-4">
@@ -682,22 +681,8 @@ const page = 'index2'
                   <!-- /.card-header -->
                   <div class="card-body">
                     <div class="row">
-                      <div class="col-md-8">
-                        <div class="chart-responsive">
-                          <canvas id="pieChart" height="150"></canvas>
-                        </div>
-                        <!-- ./chart-responsive -->
-                      </div>
-                      <!-- /.col -->
-                      <div class="col-md-4">
-                        <ul class="row list-unstyled text-nowrap">
-                          <li class="col"><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
-                          <li class="col"><i class="fa-regular fa-circle text-success"></i> IE</li>
-                          <li class="col"><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
-                          <li class="col"><i class="fa-regular fa-circle text-info"></i> Safari</li>
-                          <li class="col"><i class="fa-regular fa-circle text-primary"></i> Opera</li>
-                          <li class="col"><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
-                        </ul>
+                      <div class="col-12">
+                        <div id="pie-chart"></div>
                       </div>
                       <!-- /.col -->
                     </div>
@@ -752,63 +737,63 @@ const page = 'index2'
                   </div>
                   <!-- /.card-header -->
                   <div class="card-body p-0">
-                    <ul class="products-list product-list-in-card ps-2 pe-2">
-                      <li class="item">
-                        <div class="product-img">
+                    <div class="px-2">
+                      <div class="d-flex border-top py-2 px-1">
+                        <div class="col-2">
                           <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
                         </div>
-                        <div class="product-info">
-                          <a href="javascript:void(0)" class="product-title">Samsung TV
+                        <div class="col-10">
+                          <a href="javascript:void(0)" class="fw-bold">Samsung TV
                             <span class="badge text-bg-warning float-end">$1800</span></a>
-                          <span class="product-description">
+                          <div class="text-truncate">
                             Samsung 32" 1080p 60Hz LED Smart HDTV.
-                          </span>
+                          </div>
                         </div>
-                      </li>
+                      </div>
                       <!-- /.item -->
-                      <li class="item">
-                        <div class="product-img">
+                      <div class="d-flex border-top py-2 px-1">
+                        <div class="col-2">
                           <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
                         </div>
-                        <div class="product-info">
-                          <a href="javascript:void(0)" class="product-title">Bicycle
+                        <div class="col-10">
+                          <a href="javascript:void(0)" class="fw-bold">Bicycle
                             <span class="badge text-bg-info float-end">$700</span></a>
-                          <span class="product-description">
+                          <div class="text-truncate">
                             26" Mongoose Dolomite Men's 7-speed, Navy Blue.
-                          </span>
+                          </div>
                         </div>
-                      </li>
+                      </div>
                       <!-- /.item -->
-                      <li class="item">
-                        <div class="product-img">
+                      <div class="d-flex border-top py-2 px-1">
+                        <div class="col-2">
                           <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
                         </div>
-                        <div class="product-info">
-                          <a href="javascript:void(0)" class="product-title">
+                        <div class="col-10">
+                          <a href="javascript:void(0)" class="fw-bold">
                             Xbox One <span class="badge text-bg-danger float-end">
                             $350
                           </span>
                           </a>
-                          <span class="product-description">
+                          <div class="text-truncate">
                             Xbox One Console Bundle with Halo Master Chief Collection.
-                          </span>
+                          </div>
                         </div>
-                      </li>
+                      </div>
                       <!-- /.item -->
-                      <li class="item">
-                        <div class="product-img">
+                      <div class="d-flex border-top py-2 px-1">
+                        <div class="col-2">
                           <img src={path + '/assets/img/default-150x150.png'} alt="Product Image" class="img-size-50">
                         </div>
-                        <div class="product-info">
-                          <a href="javascript:void(0)" class="product-title">PlayStation 4
+                        <div class="col-10">
+                          <a href="javascript:void(0)" class="fw-bold">PlayStation 4
                             <span class="badge text-bg-success float-end">$399</span></a>
-                          <span class="product-description">
+                          <div class="text-truncate">
                             PlayStation 4 500GB Console (PS4)
-                          </span>
+                          </div>
                         </div>
-                      </li>
+                      </div>
                       <!-- /.item -->
-                    </ul>
+                    </div>
                   </div>
                   <!-- /.card-body -->
                   <div class="card-footer text-center">
@@ -834,130 +819,92 @@ const page = 'index2'
 
     <!-- OPTIONAL SCRIPTS -->
 
-    <!-- ChartJS -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
+    <!-- apexcharts -->
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
 
     <script is:inline>
       // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
       // IT'S ALL JUST JUNK FOR DEMO
       // ++++++++++++++++++++++++++++++++++++++++++
 
-      /* ChartJS
+      /* apexcharts
         * -------
-        * Here we will create a few charts using ChartJS
+        * Here we will create a few charts using apexcharts
         */
 
       //-----------------------
       // - MONTHLY SALES CHART -
       //-----------------------
-      (function () {
-        'use strict'
-        // Get context with querySelector - using Chart.js .getContext('2d') method.
-        var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
 
-        var salesChartData = {
-          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-          datasets: [
-            {
-              label: 'Digital Goods',
-              backgroundColor: 'rgba(60,141,188,0.9)',
-              borderColor: 'rgba(60,141,188,0.8)',
-              fill: true,
-              pointRadius: 0,
-              pointColor: '#3b8bba',
-              pointStrokeColor: 'rgba(60,141,188,1)',
-              pointHighlightFill: '#fff',
-              pointHighlightStroke: 'rgba(60,141,188,1)',
-              data: [28, 48, 40, 19, 86, 27, 90]
-            },
-            {
-              label: 'Electronics',
-              backgroundColor: 'rgba(210, 214, 222, 1)',
-              borderColor: 'rgba(210, 214, 222, 1)',
-              fill: true,
-              pointRadius: 0,
-              pointColor: 'rgba(210, 214, 222, 1)',
-              pointStrokeColor: '#c1c7d1',
-              pointHighlightFill: '#fff',
-              pointHighlightStroke: 'rgba(220,220,220,1)',
-              data: [65, 59, 80, 81, 56, 55, 40]
-            }
-          ]
-        }
-
-        var salesChartOptions = {
-          maintainAspectRatio: false,
-          responsive: true,
-          tension: 0.4,
-          plugins: {
-            legend: {
-              display: false
-            }
+      var sales_chart_options = {
+          series: [{
+          name: 'Digital Goods',
+          data: [28, 48, 40, 19, 86, 27, 90]
+        },{
+          name: 'Electronics',
+          data: [65, 59, 80, 81, 56, 55, 40]
+        }],
+        chart: {
+          height: 180,
+          type: 'area',
+          toolbar: {
+            show: false,
           },
-          scales: {
-            xAxes: {
-              gridLines: {
-                display: false
-              }
-            },
-            yAxes: {
-              gridLines: {
-                display: false
-              }
-            }
-          }
-        }
+        },
+        legend: {
+          show: false
+        },
+        colors:['#0d6efd', '#20c997'],
+        dataLabels: {
+          enabled: false,
+        },
+        stroke: {
+          curve: 'smooth'
+        },
+        xaxis: {
+          type: 'datetime',
+          categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
+        },
+        tooltip: {
+          x: {
+            format: 'MMMM yyyy'
+          },
+        },
+      };
 
-        // This will get the first returned node in the js collection.
-        var salesChart = new Chart(salesChartCanvas, {
-          type: 'line',
-          data: salesChartData,
-          options: salesChartOptions
-        })
+      var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
+      sales_chart.render();
 
-        //---------------------------
-        // - END MONTHLY SALES CHART -
-        //---------------------------
+      //---------------------------
+      // - END MONTHLY SALES CHART -
+      //---------------------------
 
-        //-------------
-        // - PIE CHART -
-        //-------------
+      //-------------
+      // - PIE CHART -
+      //-------------
 
-        // Get context with querySelector - using Chart.js .getContext('2d') method.
-        var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
+      var pie_chart_options = {
+        series: [700, 500, 400, 600, 300, 100],
+          chart: {
+          type: 'donut',
+        },
+        labels: [
+          'Chrome',
+          'Edge',
+          'FireFox',
+          'Safari',
+          'Opera',
+          'IE',
+        ],
+        dataLabels: {
+          enabled: false,
+        },
+        colors: ['#0d6efd', '#20c997', '#ffc107', '#d63384', '#6f42c1', '#adb5bd']
+      };
+
+      var pie_chart = new ApexCharts(document.querySelector("#pie-chart"), pie_chart_options);
+      pie_chart.render();
 
-        var pieData = {
-          labels: [
-            'Chrome',
-            'IE',
-            'FireFox',
-            'Safari',
-            'Opera',
-            'Navigator'
-          ],
-          datasets: [
-            {
-              data: [700, 500, 400, 600, 300, 100],
-              backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
-            }
-          ]
-        }
-        var pieOptions = {
-          plugins: {
-            legend: {
-              display: false
-            }
-          }
-        }
-        // Create pie or douhnut chart
-        // You can switch between pie and douhnut using the method below.
-        // eslint-disable-next-line no-unused-vars
-        var pieChart = new Chart(pieChartCanvas, {
-          type: 'doughnut',
-          data: pieData,
-          options: pieOptions
-        })
-      })()
       //-----------------
       // - END PIE CHART -
       //-----------------
diff --git a/src/html/pages/index3.astro b/src/html/pages/index3.astro
index f81f24f05..d9a54a696 100644
--- a/src/html/pages/index3.astro
+++ b/src/html/pages/index3.astro
@@ -14,6 +14,9 @@ const page = 'index3'
 <html lang="en">
   <head>
     <Head title={title} path={path} />
+
+    <!-- apexcharts -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
   </head>
 
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@@ -64,7 +67,7 @@ const page = 'index3'
                     <!-- /.d-flex -->
 
                     <div class="position-relative mb-4">
-                      <canvas id="visitors-chart" height="200"></canvas>
+                      <div id="visitors-chart"></div>
                     </div>
 
                     <div class="d-flex flex-row justify-content-end">
@@ -205,13 +208,13 @@ const page = 'index3'
                         <span class="text-success">
                           <i class="fa-solid fa-arrow-up"></i> 33.1%
                         </span>
-                        <span class="text-secondary">Since last month</span>
+                        <span class="text-secondary">Since Past Year</span>
                       </p>
                     </div>
                     <!-- /.d-flex -->
 
                     <div class="position-relative mb-4">
-                      <canvas id="sales-chart" height="200"></canvas>
+                      <div id="sales-chart"></div>
                     </div>
 
                     <div class="d-flex flex-row justify-content-end">
@@ -301,131 +304,109 @@ const page = 'index3'
 
     <!-- OPTIONAL SCRIPTS -->
 
-    <!-- ChartJS -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
+    <!-- apexcharts -->
+    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
 
     <script is:inline>
       // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
       // IT'S ALL JUST JUNK FOR DEMO
       // ++++++++++++++++++++++++++++++++++++++++++
 
-      /* global Chart:false */
-      (function () {
-        'use strict'
+      var visitors_chart_options = {
+          series: [
+          {
+            name: "High - 2023",
+            data: [100, 120, 170, 167, 180, 177, 160]
+          },
+          {
+            name: "Low - 2023",
+            data: [60, 80, 70, 67, 80, 77, 100]
+          }
+        ],
+          chart: {
+          height: 200,
+          type: 'line',
+          toolbar: {
+            show: false
+          }
+        },
+        colors: ['#0d6efd', '#adb5bd'],
+        stroke: {
+          curve: 'smooth'
+        },
+        grid: {
+          borderColor: '#e7e7e7',
+          row: {
+            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+            opacity: 0.5
+          },
+        },
+        legend: {
+          show: false
+        },
+        markers: {
+          size: 1
+        },
+        xaxis: {
+          categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
+        },
+      };
 
-        var ticksStyle = {
-          fontColor: '#495057',
-          fontStyle: 'bold'
+      var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
+      visitors_chart.render();
+
+
+      var sales_chart_options = {
+        series: [{
+        name: 'Net Profit',
+        data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
+      }, {
+        name: 'Revenue',
+        data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
+      }, {
+        name: 'Free Cash Flow',
+        data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
+      }],
+        chart: {
+        type: 'bar',
+        height: 200
+      },
+      plotOptions: {
+        bar: {
+          horizontal: false,
+          columnWidth: '55%',
+          endingShape: 'rounded'
+        },
+      },
+      legend: {
+        show: false
+      },
+      colors:['#0d6efd', '#20c997', '#ffc107'],
+      dataLabels: {
+        enabled: false
+      },
+      stroke: {
+        show: true,
+        width: 2,
+        colors: ['transparent']
+      },
+      xaxis: {
+        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+      },
+      fill: {
+        opacity: 1
+      },
+      tooltip: {
+        y: {
+          formatter: function (val) {
+            return "$ " + val + " thousands"
+          }
         }
+      }
+      };
 
-        var mode = 'index'
-        var intersect = true
-
-        var salesChartSelector = document.querySelector('#sales-chart')
-        // eslint-disable-next-line no-unused-vars
-        var salesChart = new Chart(salesChartSelector, {
-          type: 'bar',
-          data: {
-            labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-            datasets: [{
-              label: 'My First Dataset',
-              data: [65, 59, 80, 81, 56, 55, 40],
-              backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(255, 159, 64, 0.2)',
-                'rgba(255, 205, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(201, 203, 207, 0.2)'
-              ],
-              borderColor: [
-                'rgb(255, 99, 132)',
-                'rgb(255, 159, 64)',
-                'rgb(255, 205, 86)',
-                'rgb(75, 192, 192)',
-                'rgb(54, 162, 235)',
-                'rgb(153, 102, 255)',
-                'rgb(201, 203, 207)'
-              ],
-              borderWidth: 1
-            }]
-          },
-          options: {
-            maintainAspectRatio: false,
-            scales: {
-              y: {
-                beginAtZero: true
-              }
-            }
-          }
-        })
-
-        var visitorsChartSelector = document.querySelector('#visitors-chart')
-        var visitorsChart = new Chart(visitorsChartSelector, {
-          data: {
-            labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
-            datasets: [{
-              type: 'line',
-              data: [100, 120, 170, 167, 180, 177, 160],
-              backgroundColor: 'transparent',
-              borderColor: '#007bff',
-              pointBorderColor: '#007bff',
-              pointBackgroundColor: '#007bff'
-              // pointHoverBackgroundColor: '#007bff',
-              // pointHoverBorderColor    : '#007bff'
-            },
-            {
-              type: 'line',
-              data: [60, 80, 70, 67, 80, 77, 100],
-              backgroundColor: 'tansparent',
-              borderColor: '#ced4da',
-              pointBorderColor: '#ced4da',
-              pointBackgroundColor: '#ced4da'
-              // pointHoverBackgroundColor: '#ced4da',
-              // pointHoverBorderColor    : '#ced4da'
-            }]
-          },
-          options: {
-            maintainAspectRatio: false,
-            tooltip: {
-              mode: mode,
-              intersect: intersect
-            },
-            hover: {
-              mode: mode,
-              intersect: intersect
-            },
-            plugins: {
-              legend: {
-                display: false
-              }
-            },
-            scales: {
-              yAxes: {
-                // display: false,
-                gridLines: {
-                  display: true,
-                  lineWidth: '4px',
-                  color: 'rgba(0, 0, 0, .2)',
-                  zeroLineColor: 'transparent'
-                },
-                ticks: Object.assign({
-                  beginAtZero: true,
-                  suggestedMax: 200
-                }, ticksStyle)
-              },
-              xAxes: {
-                display: true,
-                gridLines: {
-                  display: false
-                },
-                ticks: ticksStyle
-              }
-            }
-          }
-        })
-      })()
+      var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
+      sales_chart.render();
     </script>
   </body>
 </html>
