document.addEventListener("DOMContentLoaded", function () {
// Spider Chart Data
const data = {
labels: ["Science", "Design", "Mathematics", "Creativity", "Skills"],
datasets: [{
label: "Program Benefits",
data: [7, 8, 5, 8, 5],
backgroundColor: "rgba(54, 162, 235, 0.2)",
borderColor: "rgba(54, 162, 235, 1)",
borderWidth: 2,
pointBackgroundColor: "rgba(54, 162, 235, 1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(54, 162, 235, 1)"
}]
};
// Spider Chart Configuration
const config = {
type: "radar",
data: data,
options: {
responsive: true,
scales: {
r: {
angleLines: {
color: "#e0e0e0"
},
grid: {
color: "#e0e0e0"
},
suggestedMin: 0,
suggestedMax: 10,
ticks: {
display: false
},
pointLabels: {
font: {
size: 14,
family: "Arial",
weight: "bold"
},
color: "#333"
}
}
},
plugins: {
legend: {
display: false
}
}
}
};
// Render the Spider Chart
const ctx = document.getElementById("spiderChart").getContext("2d");
new Chart(ctx, config);
});
