Chart.js Gradient Bar Chart
A rounded bar chart with a vertical gradient fill for quarterly revenue, powered by Chart.js.
Requires Chart.js. Add the CDN tag below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes it.<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script><div class="ch"><canvas id="bar"></canvas></div>body{background:#fff}
.ch{width:440px;max-width:100%;background:#fff;border-radius:16px;padding:18px;box-shadow:0 10px 30px rgba(20,25,50,.08)}var ctx=document.getElementById('bar'),g=ctx.getContext('2d').createLinearGradient(0,0,0,300);
g.addColorStop(0,'#ff7a18');g.addColorStop(1,'#ff477e');
new Chart(ctx,{type:'bar',data:{labels:['Q1','Q2','Q3','Q4'],datasets:[{label:'Revenue',data:[42,58,49,73],backgroundColor:g,borderRadius:8,barThickness:38}]},options:{plugins:{legend:{display:false}},scales:{y:{beginAtZero:true}}}});Free to use.This component uses Chart.js (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.