[Solved] CanvasJs Chart: X-axis Label overlapping when large record

Hi,

I am trying to add values dynamically to a graph, but I am facing overlapping issue in x axis.

How do I overcome of this issue could you please help me with that?

Note: Canvas.js used for graphs

var ParticipantChart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    backgroundColor: "#fcfcfc",
    title: {
        //text: "Participation Points Per Session"
    },
    axisX: {
        // title: "Participation Points Per Session",
        labelAngle: -90,
        labelFontColor: "#000",
        interval: 8,
        labelMaxWidth: 100
    },
    axisY: {
        gridThickness: 0.1,
        //  title: "Number of Visitors",
        scaleBreaks: {
            autoCalculate: true
        },

        stripLines: [
            {
                lineDashType: "longDash",
                thickness: 2,
                color: "#006400",
                label: "Average Participation Points" + "-" + 25,
                labelFontColor: "Black",
                //labelPlacement: "outside",
                value: 25,
                showOnTop: true
            }
        ]
    },
    toolTip: {
        shared: true,
        reversed: true,
    },
    dataPointWidth: 8,

    data: [
        {
            markerType: "circle",  //"circle", "square", "cross", "none"
            markerColor: "#4f9fee",
            type: "column",
            showInLegend: true,
            name: "Participation Points",
            color: "#4f9fee",

            dataPoints: DataPointPar
        },
    ]
});

function onload() {
    $.ajax({
        type: "GET",
        url: '@Url.Action("ParticipantPoint", "Common", new{area= "" })',
        dataType: 'json',
        success: function (response) {
            $.each(response, function (index) {
                if (DataPointPar.length < response.length) {
                    DataPointPar.push(response[(DataPointPar.length)]);
                }
            });
            ParticipantChart.render();
        },
        error: function (xhr, status, error) {
            alert("Error");
        }
    });
}

public ContentResult ParticipantPoint()
{
    int studentID = 0;
    int? gradeID = 0;
    var loginID = Convert.ToInt32(Session["LOGIN_ID"]);
    if (!string.IsNullOrEmpty(Convert.ToString(Session["SelectedStudentID"])) && Convert.ToString(Session["RoleName"]) == "Parent")
    {
        studentID = Convert.ToInt32(Session["SelectedStudentID"].ToString());
         gradeID = _context.FEV_STUDENT.Where(x => x.STUDENT_ID == studentID).FirstOrDefault().GRADE_ID;              
    }
    else
    {
        studentID = _context.FEV_STUDENT.Where(x => x.LOGIN_ID == loginID).FirstOrDefault().STUDENT_ID;
        gradeID = _context.FEV_STUDENT.Where(x => x.LOGIN_ID == loginID).FirstOrDefault().GRADE_ID;              
    }
    var Reportdetails = (from tfb in _context.FEV_OLTSESSION_TUTOR_FEEDBACK
                         join stu in _context.FEV_STUDENT on tfb.STUDENT_ID equals stu.STUDENT_ID
                         where stu.STUDENT_ID == studentID & stu.GRADE_ID == gradeID
                         select new ParticipantAjaxcall
                         {
                            label=tfb.LESSON_OBJECTIVE,
                            y=tfb.PARTICIPATION_POINTS
                          }).ToList();
 
    JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
    return Content(JsonConvert.SerializeObject(Reportdetails.ToList(), _jsonSetting), "application/json");          
}