Bootstrap Line Chart Card Example

Sales Overview

Place the code in the <body> for Interface
          
<!-- Chart 1 - 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">
        <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">Sales Overview</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-1"></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-1/assets/css/chart-1.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-1/assets/controller/chart-1.js"></script>
          

The Bootstrap Line Chart Card Example is a specialized component tailored for integration into admin dashboards, offering a clear and illustrative representation of data trends using line charts. This feature, constructed using Bootstrap components, ensures responsiveness and adaptability across diverse devices and screen sizes.