How to remove x axis scale labels Chart.Js

Question

I created a chart using chart.js and it works as expected. The problem is that I don't need the x axis labels (Speed). I looked at questions similar to this but none of them worked. How do you hide the x axis labels without removing or changing anything else in chart.js v3?

This chart is unintentionally hilarious. How fast was it going? Speed. — Deadron, Apr 21 '21 at 16:55
The question is duplicate of the following - than the one it was closed for: https://stackoverflow.com/questions/23424123/remove-x-axis-label-text-in-chart-js — Charlie, Apr 22 '21 at 08:42
@Charlie i looked and tested the answers in the post but none worked. — Jellyfish, May 05 '21 at 19:48
Solutions given in both the answers are working. The accepted answer is running on this page itself and showing no X labels. — Charlie, May 06 '21 at 03:40
i tried the solutions before i posted this and they dont work for me @Charlie — Jellyfish, May 06 '21 at 13:56
This means you have other error than what you have posted here. You can see its working if you run @LeeLenalees' answer right withing the page — Charlie, May 06 '21 at 14:33
@LeeLenaLees' answer was not in the possible duplicate answer — Jellyfish, May 06 '21 at 14:46

score 4 · Accepted Answer · answered Apr 21 '21 at 16:58

You can do 2 things, either supply an labels array with empty strings or use the tick callback to provide empty labels

 scales: {
            x: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return '';
                    }
                }
            }
        }

Example:

var options = {
  type: 'line',
  data: {
    // option 1, provide empty strings for labels array
    labels: ["", "", "", "", "", ""],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      x: {
        ticks: {
          //option 2, use callback to change labels to empty string
          callback: () => ('')
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js" integrity="sha512-aWx9jeVTj8X49UzUnUHGIlo6rNne1xNsCny/lL0QwUTQK2eilrHXpSk9xbRm4FJ4eLi2XBmnFlRkWPoChSx8bA==" crossorigin="anonymous"></script>
</body>

Charlie · Answer 2 · 2021-04-22T08:41:22.703

2

Simply disable the x axis labels by one flag like this:

 options: {
    scales: {
      x: {
        ticks: {
          display: false
        }
      }
    }
 }

edited Apr 22 '21 at 08:41

answered Apr 21 '21 at 17:11

Charlie

22,886
11
59
90

Wont work, chart.js needs labels to match the data to, so not providing that array and only an array of numbers for data doesnt show anything – LeeLenalee Apr 21 '21 at 19:06
@LeeLenalee You are correct. The answer editied. – Charlie Apr 22 '21 at 08:41
I tried this but it didn't work – Jellyfish May 05 '21 at 19:47

How to remove x axis scale labels Chart.Js

2 Answers2