Change CanvasJS Bar Chart X-Axis Label and Tooltip using jQuery in ASP.Net

<canvas id="bar-chart" width="1000" height="500"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script type="text/javascript">
    var remark1 = "my project details of class1 to 81";
    var remark2 = "my project details of class2 to 82";
    var remark3 = "my project details of class3 to 83";
    var remark4 = "my project details of class4 to 84";
    var remark5 = "my project details of class5 to 85";
    var remark6 = "my project details of class6 to 86";
    var remark7 = "my project details of class7 to 87";
    var remark8 = "my project details of class8 to 88";
    var remark9 = "my project details of class9 to 89";
    var remark10 = "my project details of class10 to 89";
    var point1 = 50;
    var point2 = 54;
    var point3 = 85;
    var point4 = 32;
    var point5 = 46;
    var point6 = 78;
    var point7 = 61;
    var point8 = 58;
    var point9 = 63;
    var point10 = 66;
    var ctx = document.getElementById("bar-chart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: [remark1, remark2, remark3, remark4, remark5, remark6, remark7, remark8, remark9, remark10],
            datasets: [{
                label: "Points",
                data: [point1, point2, point3, point4, point5, point6, point7, point8, point9, point10],
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850", "#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    ticks: {
                        callback: function (value, index, values) {
                            // return only first 4 charater of remark.
                            return value.substr(0, 4);
                        }
                    }
                }]
            },
            tooltips: {
                callbacks: {
                    title: function (tooltipItem, data) {
                        // Returns text to render as the title of the tooltip.
                        return data.labels[tooltipItem[0].index];
                    }
                }
            }
        }
    });
</script>