Bootstrap Doughnut Chart Card Simple Example

July 7, 2024

This Bootstrap Doughnut Chart Card offers an intuitive way to display categorical data. It presents information in a circular shape, resembling a donut, with multiple segments representing different categories or data sets.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap Doughnut Chart Card Simple Example

One of the key advantages of this Bootstrap Doughnut Chart Card is its ability to showcase proportions and percentages within a dataset effectively. By presenting categorical data in segments, these charts make it easy to visualize the contribution of each category to the total.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

In scenarios where data contains multiple categories or parts, the Doughnut Chart Card simplifies the presentation without compromising clarity. Its concise circular layout makes it ideal for representing data with a limited number of categories, providing a quick overview without overwhelming the viewer with excessive details.

Features

Bootstrap 5
BSB Framework
Bootstrap Charts
Doughnut Chart
HTML5 & CSS3
W3C Valid
Clean Snippet
Commented Code
Responsive Layout
Easy to Use
SEO Optimized
Cross Browser Compatible

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

HTML
CSS
JS

<!-- 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>

<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">

<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>

Bootstrap 5 Charts

Browse our free Bootstrap Charts to visualize trends, progress, or fluctuations in data, aiding quick comprehension and analysis. These Bootstrap Charts present data points, movements, or patterns over time or specific intervals, facilitating decision-making.