Bootstrap Doughnut Chart Card Example

How to use this Bootstrap snippet
Browser Usage

How to use this Bootstrap Doughnut Chart Card Example

Place the code in the <body> for Interface 
          
<!-- Chart 2 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-xl-8 col-xxl-7">
        <div class="card widget-card border-light shadow-sm">
          <div class="card-body p-4">
            <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
              <div class="mb-3 mb-sm-0">
                <h5 class="card-title widget-card-title">Browser Usage</h5>
              </div>
              <div>
                <select class="form-select text-secondary border-light-subtle">
                  <option value="1">March 2023</option>
                  <option value="2">April 2023</option>
                  <option value="3">May 2023</option>
                  <option value="4">June 2023</option>
                </select>
              </div>
            </div>
            <div id="bsb-chart-2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/components/charts/chart-2/assets/css/chart-2.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/bs-brain@2.0.4/components/charts/chart-2/assets/controller/chart-2.js"></script>

The Bootstrap Doughnut Chart Card Example is a specialized element designed for seamless integration into admin dashboards, providing a visually compelling representation of data through doughnut charts. Developed using Bootstrap components, this feature ensures adaptability and responsiveness across various screen sizes and devices. It empowers administrators to present critical data concisely and visually engagingly, utilizing doughnut charts embedded within cards to showcase proportions, percentages, or categorical distributions.