Bootstrap Area Chart Card Snippet

How to use this Bootstrap snippet
Projects

20,184

-15%

How to use this Bootstrap Area Chart Card Snippet

Place the code in the <body> for Interface 
          
<!-- Chart 9 - 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-2">Projects</h5>
            <div class="row gy-0">
              <div class="col-12">
                <h4>20,184</h4>
              </div>
              <div class="col-12">
                <div class="d-flex align-items-center">
                  <span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-2">
                    <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                  </span>
                  <div>
                    <span class="fs-7">-15%</span>
                  </div>
                </div>
              </div>
            </div>
            <div id="bsb-chart-9" class="mt-2"></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-9/assets/css/chart-9.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-9/assets/controller/chart-9.js"></script>

The Simple Bootstrap Area Chart Card is a specialized graphical component tailored for admin dashboards, facilitating the visualization of data trends using area charts. Developed within the Bootstrap framework, this feature ensures adaptability and responsiveness across various devices and screen sizes. By integrating area charts within cards, this feature effectively summarizes complex data insights, assisting administrators in making informed decisions and gaining valuable insights within the administrative context.