Setting up the chart
All I did was make the hexadecimal colors and the chart list dynamic
Series
Last updated
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var options = {
colors: ["#4F46E5", "#10b981", "#ff9800", "#ff5724", "#0ea5e9"],
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
labels: [
"iPhone 13 Pro",
"MacBook Air",
"Bose QuietComfort 45 Headphones",
"Samsung QLED 8K TV",
"GoPro Hero 10",
"Xbox Series X",
"Amazon Echo Show 10",
"Fitbit Versa 3",
"Canon EOS 90D Camera"
],
chart: {
type: "polarArea",
height: 390
},
stroke: {
colors: ["#fff"]
},
fill: {
opacity: 0.8
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: "bottom"
}
}
}
]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
};
</script>
</head>
<body>
<div id="chart" style="width: 95%;"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</body>
</html> series: [14, 23, 21]
labels: ["iPhone 13 Pro", "MacBook Air", "Bose QuietComfort 45 Headphones"]