Bootstrap 5 Chart Card

Bootstrap 5 chart cards combine Bootstrap's card component with Chart.js 4 for dashboard data visualization. This page covers 4 chart card patterns — line, bar, doughnut and sparkline.

Setup

<!-- Add Chart.js before closing body -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

Basic Pattern

<div class="card border-0 shadow-sm">
  <div class="card-body">
    <canvas id="myChart" height="160"></canvas>
  </div>
</div>
<script>
  new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: { labels: [...], datasets: [{ data: [...] }] },
    options: { responsive: true }
  });
</script>