Bootstrap Doughnut Chart Card Snippet

How to use this Bootstrap snippet
Department Sales

How to use this Bootstrap Doughnut Chart Card Snippet

Place the code in the <body> for Interface 
          
<!-- Chart 4 - 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">Department Sales</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-4"></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://unpkg.com/[email protected]/components/charts/chart-4/assets/css/chart-4.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-4/assets/controller/chart-4.js"></script>

The Bootstrap Simple Doughnut Chart is a user-friendly graphical representation tool designed for integration into admin dashboards. It offers a straightforward way to visualize data using doughnut charts, employing the Bootstrap framework for adaptability and responsiveness across diverse screen sizes and devices. This charting feature allows administrators to present categorical data or proportions clearly and concisely, displaying information in a circular format with segmented sections.