Remove x-axis label/text in Chart.js

javascript

chartjs

javascript-options

customization

byAnton Shumikhin·Oct 28, 2024

Eliminate the x-axis label in Chart.js by tweaking the chart options:

options: {
  scales: {
    x: { // Two words for Chart.js version 3+: No show!
      display: false // No more x-axis labels, as if they never existed
    }
  }
}

By setting display: false within scales.x, the x-axis and its labels won't be rendered. Just copy and paste this snippet into your Chart.js configuration for a label-free x-axis.

Breaking down the code

Removing labels, not the axis

What if we wanna keep the x-axis but not the labels? Here's how you can do that:

options: {
  scales: {
    x: {
      ticks: {
        display: false // Poof! Labels are gone, but the axis remains
      }
    }
  }
}

Keeping up with versions

From Chart.js v2.1 and onwards, the scaleShowLabels: false just doesn't cut it anymore. Always refer to the latest Chart.js documentation to stay updated.

Handling older versions

For Chart.js versions before v2.1.4, display: false might not always work reliably. Make sure to verify your code's compatibility with your version of Chart.js.

Global legend removal

To remove the legend from all your chart instances, use:

Chart.defaults.global.legend.display = false; // Because sometimes, legends are overrated 😏

But remember, this affects the chart's legend, not the x-axis labels.

Deep dive into edge cases and overrides

Version Differences: Chart.js might expect xAxes or a plain x in the options object depending on your version. Use 'xAxes' for version 2 and 'x' for version 3+.
Smart Initialization: Hide labels right from the start by configuring these options while initializing the chart.
Out-of-the-box Thinking: Combine an empty labels array with scaleShowLabels: false for older versions when in a pinch—and if feeling old-school!

Advanced Chart.js options

Chart.js: More than just axes

Other chart elements like tooltips and the animation speed can be customized in Chart.js. Dive deeper into config options and see your chart transform!