How can I pass a variable in a for loop in javascript to the model field?

I need to dynamically create a graph based on the selected sheet. I need to loop these graphs, but I have no idea how I can use the variable:let i in my model as an INDEX

info: The undefined functions used are for creating a graph and work correctly if I follow the syntax of the passed variables

window.onload = function () {
for (let i = 0; i < @Model.CanvasData.Count(); i++) {
var lineData = CreateLineData(@Html.Raw(Model.CanvasData[INDEX].SerializedX), '@Model.CanvasData[INDEX].CanvasName', '#00a4a4AD', '#00a4a4A1', '#00a4a436', 0.5, true);

 LineCanvas(@Html.Raw(Model.CanvasData[INDEX].SerializedY), [lineData], '@Model.CanvasData[INDEX].CanvasName', "test", false);
}
}

I also tried the ajax function, where I would return the finished data, but there I have even more problems ... for example, I do not know how to replace the entire notation @Html.Raw(SerializedVariableData) with a variable in javascript ready to pass chartjs data

This is the result of the graph if I use the index directly @Html.Raw(Model.CanvasData[0].SerializedX) enter image description here

I'm a beginner and I've been fighting for a long time, please help