Hide scale labels on y-axis Chart.js

Last Updated: September 14, 2022 javascript Share on :

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

Full Example code to hide labels on y-axis

<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>

THe above HTML code will output a bar chart that will not not have any values labels on y-axis.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer