Hi mukesh1,
Set legend display to false in the options object to hide the legend from graph.
Refer below sample.
HTML
<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: {
legend: {
display: false
},
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>
Demo