Bootstrap Line Chart Card Example
<!-- 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>
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.