Chart.js is 200KB. For a dashboard with three charts, the handmade versions are lighter, fully styleable, and teach you how charts actually work.
Bar chart — flexbox + heights
<div class="bars"> <div class="bar" style="--v: 65%" data-label="Sem 1"></div> <div class="bar" style="--v: 82%" data-label="Sem 2"></div> </div>
.bars { display: flex; align-items: flex-end; gap: 12px; height: 200px; }
.bar { flex: 1; height: var(--v); background: linear-gradient(#6d6ffb, #8b5cf6);
border-radius: 6px 6px 0 0; animation: grow .6s ease; }
@keyframes grow { from { height: 0; } }
.bar::after { content: attr(data-label); /* position below */ }Line chart — SVG polyline
const points = [72, 78, 74, 85, 88, 91] // GPA per semester
.map((v, i) => `${i * 60},${200 - v * 2}`).join(" ");
svg.innerHTML = `
<polyline points="${points}" fill="none"
stroke="#6d6ffb" stroke-width="3" stroke-linejoin="round"/>`;Donut — one div
.donut {
--p: 73; /* percent */
background: conic-gradient(#6d6ffb calc(var(--p) * 1%), #2a2a38 0);
border-radius: 50%; aspect-ratio: 1;
mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
}Animate the donut by transitioning a registered custom property, add tooltips with title or the CSS tooltip pattern. A "my semester GPA" dashboard using these + the CGPA calculator logic = a genuinely personal portfolio piece.