Limit chart.js X axis ticks

Question

I'm trying to limit the amount of X ticks displayed on the ChartJS config, but it keeps ignoring the setup.

const data = {
   labels: ['', '', ''],   
   datasets: [{
      label: '偽のラスパイ MQTT',
      data: ['', '', ''],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
   }]
};
const config = {
   type: 'line',
   data,
   options: {
      scales: {
         xAxis: {
            ticks: {
               maxTicksLimit: 1
            }
         }
      }
   }
};
const myChart = new Chart(document.getElementById('myChart'), config);

Although I checked other posts, it seems to be some minor differences in the property name and property depth for the maxTicksLimit

Maybe the property name is incorrect?

user_8682983 · Answer

This is because you are using V2 of chart.js while using V3 syntax. For V2 all x axes scales are in an array calles xAxes and not their own object.

For the full docs you can see them here

Live example:

const data = {
  labels: ['', '', '', '', '', ''],
  datasets: [{
    label: '偽のラスパイ MQTT',
    data: ['', '', '', '', '', ''],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};
const config = {
  type: 'line',
  data,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          maxTicksLimit: 1
        }
      }]
    }
  }
};
const myChart = new Chart(
  document.getElementById('chartJSContainer'), config);

Limit chart.js X axis ticks

1 Answers