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>
                <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>
            <div id="bsb-chart-1"></div>
Place the <link> tag in the <head> for CSS
<link rel="stylesheet" href="[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="[email protected]/components/charts/chart-1/assets/css/chart-1.css">
Place the <script> tag before the closing </body> for JS
<script src=""></script>
<script src="[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.