Bootstrap Line Chart Card Example

December 9, 2023

This Bootstrap Line Chart card example is a powerful component used in admin dashboards to display trends, data patterns, or performance metrics visually appealingly.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.2 and BSB Framework 2.0.3. We have rechecked this Bootstrap snippet on Nov 29, 2023.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap Line Chart Card Example

This Bootstrap Line Chart card example integrates elements with line charts to provide concise yet comprehensive insights. It utilizes interactive line charts powered by ApexCharts.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

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

This Bootstrap Line Chart card example offers various customization options, such as color schemes, line styles, and chart configurations. It allows the modification of axes, labels, tooltips, and chart elements to align with the dashboard’s design.

Features

Bootstrap 5
BSB Framework
Bootstrap Charts
Line 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

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

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

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

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.