Chart.js Radar Comparison
A two-series radar chart comparing products across six dimensions, 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="radar"></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('radar'),{type:'radar',data:{labels:['Speed','Design','Support','Price','Features','UX'],datasets:[{label:'Product A',data:[80,90,70,60,85,88],borderColor:'#ff477e',backgroundColor:'rgba(255,71,126,.18)'},{label:'Product B',data:[70,60,90,80,65,72],borderColor:'#5b6cff',backgroundColor:'rgba(91,108,255,.18)'}]},options:{scales:{r:{beginAtZero:true,max:100}}}});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.