Hello guys in Stackoverflow, I have a problem, I am trying to remove the top title bar in the chart from Chart.js but it never goes away even though I tried all the common methods to remove it
note: I am using Chart.js v4.4.2
<script>
var ctx = document.getElementById('studentChart').getContext('2d');
var studentChart = new Chart(ctx, {
type: 'line',
data: {
labels: [<?php echo implode(',', range(1, 31)); ?>],
datasets: [{
label: 'Male',
data: [<?php echo implode(',', $analyticsData['maleStudents']); ?>],
backgroundColor: 'rgb(54 162 235 / 5%)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 2,
fill: true,
}, {
label: 'Female',
data: [<?php echo implode(',', $analyticsData['femaleStudents']); ?>],
backgroundColor: 'rgb(255 99 132 / 5%)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
fill: true,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0
}
}]
},
legend: {
display: true,
labels: {
generateLabels: function(chart) {
return [
{ text: 'Male', fillStyle: 'rgba(54, 162, 235, 0.1)', strokeStyle: 'rgba(54, 162, 235, 1)' },
{ text: 'Female', fillStyle: 'rgba(255, 99, 132, 0.1)', strokeStyle: 'rgba(255, 99, 132, 1)' }
];
}
}
}
}
});
</script>
I have tried the solutions provided in Stackoverflow and AI answers but to no avail. Can someone help me here please?
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
min: 0
}
}]
},
legend: {
display: false
}
}
Under the options settings, change legend display to false. Please let me know if this works:
options: {
plugins: {
legend: {
display: false,
},