Hide scale labels on y-axis Chart.js
In Chart.js, the y-axis shows the scale values based on that the chart is plotted. If you have a requirement to hide these scale values labels, then you can use this code snippet.
var mychart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
y: {
ticks: {
display: false
}
}
}
}
});Chart.js library is used to plot different types of charts on a webpage. In this code snippet, we are hiding labels on the y-axis using the above code snippet. We are assigning display: false property to ticks object that exists inside the options object of Chart.js.
We are hiding y-axis labels values specific to chart objects only. The code will not hide the labels from all the charts but only the chart that is plotted and has options object.
The minimal code that is used in options to remove or hide y-axis labels is as below:
scales: {
y: {
ticks: {
display: false
}
}
}Live Demo
The live demo for hiding y-axis labels can be found below
<canvas id="my_chart" width="400" height="200" ></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script>
var ctx = document.getElementById("my_chart").getContext("2d");
new Chart(ctx, {
type: 'bar',
data: {
labels: ["Jan", "Feb", "Mar", "Apr"],
datasets: [{
label: "Title on top",
data: [10, 80, 56, 60]
}]
},
options: {
scales: {
y: {
ticks: {
display: false
}
}
}
}
});
</script>