Chart.js Line Chart
A smooth, filled line chart with gradient points showing weekly visitors, 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="line"></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)}new Chart(document.getElementById('line'),{type:'line',data:{labels:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],datasets:[{label:'Visitors',data:[120,190,170,260,230,310,290],borderColor:'#ff477e',backgroundColor:'rgba(255,71,126,.12)',fill:true,tension:.4,pointRadius:4,pointBackgroundColor:'#ff7a18'}]},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.