{{template "components/header.html" .}}
{{template "components/preloader.html" .}}
  <div id="main-wrapper">
    <!-- Sidebar Start -->
    {{template "components/sidebar.html" .}}
    <!--  Sidebar End -->
    <div class="page-wrapper">
      <!--  Header Start -->
      {{template "components/topbar.html" .}}
      <!--  Header End -->
      <div class="body-wrapper">
        <div class="container-fluid">
          <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
              <div class="row align-items-center">
                <div class="col-9">
                  <h4 class="fw-semibold mb-8">Chart Apex Area</h4>
                  <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                      <li class="breadcrumb-item">
                        <a class="text-muted text-decoration-none" href="../main/index.html">Home</a>
                      </li>
                      <li class="breadcrumb-item" aria-current="page">Chart Apex Area</li>
                    </ol>
                  </nav>
                </div>
                <div class="col-3">
                  <div class="text-center mb-n5">
                    <img src="../assets/images/breadcrumb/ChatBc.png" alt="modernize-img" class="img-fluid mb-n4" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- start Basic Area Chart -->
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Basic Area Chart</h4>
              <div class="mx-n2" id="chart-area-basic"></div>
            </div>
          </div>
          <!-- end Basic Area Chart -->
          <!-- start Spline Area Chart -->
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Spline Area Chart</h4>
              <div class="mx-n3" id="chart-area-spline"></div>
            </div>
          </div>
          <!-- end Spline Area Chart -->
          <!-- start DateTime X-axis Area Chart -->
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">DateTime X-axis Area Chart</h4>
              <div class="mx-n3" id="chart-area-datetime"></div>
            </div>
          </div>
          <!-- end DateTime X-axis Area Chart -->
        </div>
      </div>



    </div>


  </div>
{{template "components/footer.html" .}}

 
  
  <script src="../assets/js/apex-chart/apex.area.init.js"></script>