let categList = [];
let correctRateList = [];
let categAveList = [];
let ctx = document.getElementById("myChart");
let data = {
labels: [categList[0], categList[1], categList[2], categList[3], categList[4]],
datasets: [
{
label: "Individual",
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,99,132,1)",
data: [correctRateList[0], correctRateList[1], correctRateList[2], correctRateList[3], correctRateList[4]]
},
{
label: "SCMS",
backgroundColor: "rgba(255,153,0,0.2)",
borderColor: "rgba(255,153,0,1)",
pointBackgroundColor: "rgba(255,153,0,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(255,153,0,1)",
data: [categAveList[0], categAveList[1], categAveList[2], categAveList[3], categAveList[4]]
}
]
};
The number of items on the list can vary, so it's important to make the implementation more flexible instead of assuming there are always 5 items. One way to achieve this is by passing the entire list variable in the label and data tag. When attempting: labels: [categList] it doesn't display the desired outcome. Is there a way to achieve this?