Chart.js Doughnut Chart
A clean doughnut chart breaking down traffic by device, 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="dgh"></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('dgh'),{type:'doughnut',data:{labels:['Desktop','Mobile','Tablet'],datasets:[{data:[58,33,9],backgroundColor:['#ff477e','#5b6cff','#16a34a'],borderWidth:0}]},options:{cutout:'68%',plugins:{legend:{position:'bottom'}}}});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.