Bootstrap Doughnut Chart Card Simple Example

How to use this Bootstrap snippet
Sales

2,679

+39%

How to use this Bootstrap Doughnut Chart Card Simple Example

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

The Simple Bootstrap Doughnut Chart Card is a specialized visual tool crafted for integration into admin dashboards, offering a straightforward and visually appealing representation of data through doughnut charts. This feature, built using the Bootstrap framework, ensures adaptability and responsiveness across various screen sizes and devices. It empowers administrators to present categorical data or proportions concisely and efficiently understandably within dashboard cards. By incorporating doughnut charts within cards, this feature effectively summarizes vital data insights, aiding administrators in making informed decisions and gaining valuable insights within the administrative context.