Bootstrap 5 · Intermediate

Sparkline KPI Grid

A four-card KPI grid with mixed sparkline charts, via ApexCharts.

Requires Bootstrap 5, ApexCharts. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.49.1/dist/apexcharts.min.js"></script>

<div class="row g-2" style="max-width:440px">
  <div class="col-6"><div class="card border-0 shadow-sm"><div class="card-body p-2"><div class="d-flex justify-content-between small"><span class="text-secondary">Revenue</span><span class="text-success">+8%</span></div><div id="sg1"></div></div></div></div>
  <div class="col-6"><div class="card border-0 shadow-sm"><div class="card-body p-2"><div class="d-flex justify-content-between small"><span class="text-secondary">Orders</span><span class="text-danger">-3%</span></div><div id="sg2"></div></div></div></div>
  <div class="col-6"><div class="card border-0 shadow-sm"><div class="card-body p-2"><div class="d-flex justify-content-between small"><span class="text-secondary">Users</span><span class="text-success">+12%</span></div><div id="sg3"></div></div></div></div>
  <div class="col-6"><div class="card border-0 shadow-sm"><div class="card-body p-2"><div class="d-flex justify-content-between small"><span class="text-secondary">Churn</span><span class="text-success">-1%</span></div><div id="sg4"></div></div></div></div>
</div>

function sp(id,data,color,type){new ApexCharts(document.getElementById(id),{chart:{type:type||'line',height:44,sparkline:{enabled:true}},series:[{data:data}],stroke:{width:2,curve:'smooth'},colors:[color]}).render()}
sp('sg1',[10,15,12,18,20,25],'#16a34a');sp('sg2',[20,18,22,17,15,14],'#dc3545');sp('sg3',[5,9,12,16,20,28],'#0d6efd','area');sp('sg4',[8,7,6,5,4,3],'#16a34a','bar');

Free to use.This component uses Bootstrap 5, ApexCharts (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.