Bootstrap Column Chart Card Example

Revenue Stats

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/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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.