javascript

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="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: {
        plugins: {
            legend: {
                display: false
            }
        }
    }
});
</script>

Live Demo

Was this helpful?