Search code snippets, questions, articles...

Hide label text on x-axis in Chart.js

By default, chart.js display all the label texts on both axis(x-axis and y-axis). You can hide them by using the below code.
var mychart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                ticks: {
                    display: false

We are assigning display: false to x-axis ticks object inside scales object of options objects. If you want to show the labels you can assign display: true to the ticks property. 

Full Example code

The full example code can be found below to plot a chart without dataset labels texts.

<canvas id="my_chart" width="400" height="200" ></canvas>

<script src="[email protected]/dist/chart.min.js"></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: {
        plugins: {
            legend: {
                display: false

Live Demo

Was this helpful?
Programming Feeds
Learn something new everyday on Devsheet