Bootstrap Column Chart Card Example

How to use this Bootstrap snippet
Revenue Stats

How to use this Bootstrap Column Chart Card Example

Place the code in the <body> for Interface 
          
<!-- Chart 3 - 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">
            <h5 class="card-title widget-card-title mb-3">Revenue Stats</h5>
            <div id="bsb-chart-3"></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-3/assets/css/chart-3.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-3/assets/controller/chart-3.js"></script>

The Bootstrap Column Chart Card Example is a specialized feature designed for integration into admin dashboards, offering a visually impactful representation of data through column charts. This column chart allows for clearly visualizing data variations, highlighting specific data points or categories for easy comprehension. Administrators can customize these cards to align with the dashboard's visual style and emphasize pertinent information.