Mini Dashboard Card
A dashboard card with count-up KPIs and an area chart, 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="card border-0 shadow-sm" style="width:440px;max-width:100%"><div class="card-body">
<div class="row g-2 mb-2"><div class="col-4"><div class="bg-light rounded p-2 text-center"><div class="small text-secondary">Users</div><div class="fw-bold" id="dbU">0</div></div></div><div class="col-4"><div class="bg-light rounded p-2 text-center"><div class="small text-secondary">Revenue</div><div class="fw-bold" id="dbR">0</div></div></div><div class="col-4"><div class="bg-light rounded p-2 text-center"><div class="small text-secondary">Churn</div><div class="fw-bold" id="dbC">0</div></div></div></div>
<div id="dbChart"></div>
</div></div>function cu(id,to,pre,suf){var s=null,el=document.getElementById(id);function step(t){if(!s)s=t;var p=Math.min((t-s)/1200,1);el.textContent=(pre||'')+Math.floor((1-Math.pow(1-p,3))*to).toLocaleString()+(suf||'');if(p<1)requestAnimationFrame(step)}requestAnimationFrame(step)}
cu('dbU',12480);cu('dbR',48200,'$');cu('dbC',2.1,'','%');
new ApexCharts(document.getElementById('dbChart'),{chart:{type:'area',height:160,toolbar:{show:false}},series:[{name:'Visits',data:[20,35,30,45,40,60,55]}],colors:['#0d6efd'],fill:{type:'gradient',gradient:{opacityFrom:.5,opacityTo:0}},stroke:{curve:'smooth',width:2},dataLabels:{enabled:false},xaxis:{labels:{show:false}}}).render();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.