Chartjs-How to load dynamic label and data from controller in chart?

1👍

Try this way:

Install Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet Package and then serialize the ViewBag.radarDesc into a valid JavaScript array:

ViewBag.radarDesc = Newtonsoft.Json.JsonConvert.SerializeObject(modelIist);

Then take out the Label and Data in the Page and fill it to the appropriate position:

$(document).ready(function () {
        var Label = [];
        var Data = [];
        var radarDesc = @Html.Raw(@ViewBag.radarDesc);
        $.each(radarDesc, function (index, value) {
            Label.push(value.Label);
            Data.push(value.Data);
        });

        var ctx = $("#chart-line");
        var myLineChart = new Chart(ctx, {
            type: 'radar',
            data: {
                labels: Label,  //want to load from the list
                /*},*/

                datasets: [{
                    data: Data,//want to load from the list
                    label: "MyData",
                    borderColor: "#458af7",
                    backgroundColor: '#458af7',
                    fill: true
                }]
            },
            options: {
                title: {
                    display: true,
                    text: '(Max points - 300)'
                }
            }
        });
    });

Test Result:

enter image description here

Leave a comment