Search code snippets, questions, articles...

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
                }
            }
        }
    }
});
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

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>
THe above HTML code will output a bar chart that will not not have any values labels on y-axis.
Was this helpful?
0 Comments