Bootstrap Area Chart Card Example

How to use this Bootstrap snippet
Visitor Stats

Overview

Chrome

since last week

+345
Safari

since last week

+129
Firefox

since last week

+89
Edge

since last week

+62

How to use this Bootstrap Area Chart Card Example

Place the code in the <body> for Interface 
          
<!-- Chart 6 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-sm-10 col-md-7 col-lg-6 col-xl-5 col-xxl-4">
        <div class="card widget-card border-light shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title widget-card-title mb-1">Visitor Stats</h5>
            <p class="fs-7 text-secondary mb-4">Overview</p>
            <div id="bsb-chart-6" class="mb-4"></div>
            <div class="row gy-4">
              <div class="col-12">
                <div class="row align-items-center">
                  <div class="col-8">
                    <div class="d-flex align-items-center">
                      <div>
                        <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                          <i class="bi bi-browser-chrome"></i>
                        </div>
                      </div>
                      <div>
                        <h6 class="m-0">Chrome</h6>
                        <p class="text-secondary m-0 fs-7">since last week</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                      <span class="bg-primary-subtle text-primary rounded-2 py-1 px-2">+345</span>
                    </h6>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row align-items-center">
                  <div class="col-8">
                    <div class="d-flex align-items-center">
                      <div>
                        <div class="fs-5 bsb-w-50 bsb-h-50 bg-success-subtle text-success rounded-2 d-flex align-items-center justify-content-center me-3">
                          <i class="bi bi-browser-safari"></i>
                        </div>
                      </div>
                      <div>
                        <h6 class="m-0">Safari</h6>
                        <p class="text-secondary m-0 fs-7">since last week</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                      <span class="bg-success-subtle text-success rounded-2 py-1 px-2">+129</span>
                    </h6>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row align-items-center">
                  <div class="col-8">
                    <div class="d-flex align-items-center">
                      <div>
                        <div class="fs-5 bsb-w-50 bsb-h-50 bg-danger-subtle text-danger rounded-2 d-flex align-items-center justify-content-center me-3">
                          <i class="bi bi-browser-firefox"></i>
                        </div>
                      </div>
                      <div>
                        <h6 class="m-0">Firefox</h6>
                        <p class="text-secondary m-0 fs-7">since last week</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                      <span class="bg-danger-subtle text-danger rounded-2 py-1 px-2">+89</span>
                    </h6>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="row align-items-center">
                  <div class="col-8">
                    <div class="d-flex align-items-center">
                      <div>
                        <div class="fs-5 bsb-w-50 bsb-h-50 bg-info-subtle text-info rounded-2 d-flex align-items-center justify-content-center me-3">
                          <i class="bi bi-browser-edge"></i>
                        </div>
                      </div>
                      <div>
                        <h6 class="m-0">Edge</h6>
                        <p class="text-secondary m-0 fs-7">since last week</p>
                      </div>
                    </div>
                  </div>
                  <div class="col-4">
                    <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                      <span class="bg-info-subtle text-info rounded-2 py-1 px-2">+62</span>
                    </h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/charts/chart-6/assets/css/chart-6.css">
Place the <script> tag before the closing </body> for JS 
            
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://unpkg.com/[email protected]/components/charts/chart-6/assets/controller/chart-6.js"></script>

The Bootstrap Area Chart Card is a specialized feature designed for admin dashboards, offering a visually intuitive way to display and analyze data through area charts. Utilizing Bootstrap components, this tool ensures seamless responsiveness and adaptability across various devices and screen sizes. The inclusion of area charts within cards serves as an effective means for summarizing complex data insights, aiding administrators in making informed decisions and gaining valuable insights within the administrative context.