I am working on an ASP.NET MVC5 application and I’m trying to display a Kendo line chart. The chart should plot month and year on the x-axis and compliance percentage on the y-axis, with a line series representing the compliance percentage for each adjudicator. However, the chart is not rendering any data, and it’s appearing blank.

Here is my Kendo chart configuration in the view:

<div class="col-md-6 pt-20">
    @(Html.Kendo().Chart<MiCATS.Models.ChartDataItem2>()
        .Name("chart11")
        .Title("Compliance by Adjudicator")
        .Theme("bootstrap")
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("ComplianceByAdjudicator", "Analytics"))
        )
        .Series(series => {
            series.Line(model => model.CompliancePercent);
        })
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
        .ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0}%")).Color("black").Title("Compliance Percent"))
        .CategoryAxis(axis => axis.Categories(model => model.YearMonth).Color("black").Title("Months"))
    )
</div>

Despite the response containing data, the chart remains blank. I have verified that the JSON response contains the expected data. Here are a few things I’ve tried, but without success:

1. Checked for any JavaScript errors in the console.
2. Verified that the data source is correctly set up.
3. Made sure the category axis binds to YearMonth.
4. Confirmed that the ComplianceByAdjudicator action returns the correct data.

What am I missing or doing wrong? Why is the Kendo chart not displaying the data?

Here is the model used for the chart data:

using System;
using System.Collections.Generic;

namespace MiCATS.Models
{
    public class AnalyticsChartViewModel
    {
        public string SeriesName { get; set; }
        public string SeriesName2 { get; set; }
        public string SeriesName3 { get; set; }
        public string Department { get; set; }
        public string Year { get; set; }
        public int Year2 { get; set; }
        public string XAxisLabel { get; set; }
        public double SeriesValue { get; set; }
        public double SeriesValue2 { get; set; }
        public double SeriesValue3 { get; set; }
        public double SeriesValue4 { get; set; }
        public double SeriesValue5 { get; set; }
        public double SeriesValue6 { get; set; }
        public double SeriesValue7 { get; set; }
        public List<ChartDataItem> ChartData { get; set; }
        public List<ChartDataItem2> ChartData2 { get; set; }
    }

    public class ChartDataItem
    {
        public int Year { get; set; }
        public int Month { get; set; }
        public int QuestionId { get; set; }
        public string Question { get; set; }
        public string Section { get; set; }
        public int GapsIdentified { get; set; }
        public string YearMonth { get; set; }
        public string Date { get; set; }
    }

    public class ChartDataItem2
    {
        public int Year { get; set; }
        public int Month { get; set; }
        public double CompliancePercent { get; set; }
        public string Adjudicator { get; set; }
        public string YearMonth { get; set; }
    }
}

Here is the response I am getting:

{
    "ChartData": null,
    "ChartData2": [
        {"Year": 2024, "Month": 3, "CompliancePercent": 38.33, "Adjudicator": "Cheryl Stanecki", "YearMonth": "March 2024"},
        {"Year": 2024, "Month": 4, "CompliancePercent": 80, "Adjudicator": "Cheryl Stanecki", "YearMonth": "April 2024"},
        {"Year": 2024, "Month": 5, "CompliancePercent": 92.14, "Adjudicator": "Tonita Young", "YearMonth": "May 2024"},
        {"Year": 2024, "Month": 3, "CompliancePercent": 58, "Adjudicator": "Dawanda Liddell", "YearMonth": "March 2024"}
    ],
    "Department": null,
    "SeriesName": null,
    "SeriesName2": null,
    "SeriesName3": null,
    "SeriesValue": 0,
    "SeriesValue2": 0,
    "SeriesValue3": 0,
    "SeriesValue4": 0,
    "SeriesValue5": 0,
    "SeriesValue6": 0,
    "SeriesValue7": 0,
    "XAxisLabel": null,
    "Year": null,
    "Year2": 0
}