Setting up the chart
All I did was make the hexadecimal colors and the chart list dynamic
Series
Labels
Last updated
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
var options = {
legend: {
fontSize: "14px",
fontWeight: 600,
fontFamily: "Inter, sans-serif",
show: true,
position: "right",
formatter: function (val, opts) {
return (
val +
" <span style='color: #374151;'>$" +
opts.w.globals.series[opts.seriesIndex]
.toString()
.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",") +
"</span>"
);
},
labels: {
colors: "#9CA3AF",
useSeriesColors: false
},
itemMargin: {
horizontal: 6,
vertical: 6
}
},
tooltip: {
enabled: true
},
plotOptions: {
pie: {
donut: {
size: "60%",
labels: {
show: true
}
},
expandOnClick: true
}
},
grid: {
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
colors: ["#F1416C", "#E5E7EB", "#4F46E5"],
series: [7660, 2820, 45257],
labels: ["Shoes", "Gaming", "Others"],
chart: {
type: "donut",
height: "auto",
width: 400,
offsetX: 20,
sparkline: {
enabled: true
}
}
};
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>
7660, 2820, 45257"Shoes", "Gaming", "Others"