Limit Labels Number on Chart.Js Line Chart

Limit labels number on Chart.js line chart

Try adding the options.scales.xAxes.ticks.maxTicksLimit option:

xAxes: [{
    type: 'time',
    ticks: {
        autoSkip: true,
        maxTicksLimit: 20
    }
}]

Display a limited number of labels only on X-Axis of Line Chart using Chart.js

This worked perfectly.

xAxes:[{
    ticks:{
        display: true,
        autoSkip: true,
        maxTicksLimit: 4
    }
}]

Limit chart.js X axis ticks

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);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

ChartJS v3.X - Limit the string size of label on canvas, without changing tooltip hover string

After wasting many hours I found a "Tip" highlight on the documentation that should be in the examples, and not just badly highlighted on the "Labeling Axes" page.

When you do a callback for ticks on the chart options settings, you get 3 params to call:

function(value, index, ticks)

I tried in many ways to change the last one because it is the array of all ticks with their labels, and it is the only one where the label string appears so I was trying to modify it.

You'd think at first that the "value" parameter is the one to be changed, but it returns the exactly same integer value as the "index" parameter on each callback iteration, so I thought the only one the I could manipulate to change the string was the "ticks" array, but I was completely wrong.

You actually need to call a special function called getLabelForValue().

The working code ended up like this:

const configTotal = {
    type: 'bar',
    data: dataTotal,
    options: {
        scales: {
            y: {
                beginAtZero: true
            },
            x: {
                ticks: {
                    callback: function(value, index, ticks_array) {
                        let characterLimit = 12;
                        let label = this.getLabelForValue(value);
                        if ( label.length >= characterLimit) {
                            return label.slice(0, label.length).substring(0, characterLimit -1).trim() + '...';
                        }
                        return label;
                    }
                }
            }
        }
    },
};

I hope this helps anyone having the same problem as me.

Maybe all the time I wasted is all on me for not reading every single line with more patience, but in my opinion, this documentation lacks a lot more example codes for accessing properties and callback parameters and it's object values, the way it is just showing the type of object and returns of each class method call, makes it very confusing for non-experienced on chart.js users.

Chart.js line graph-removing labels on the line

Put this in option

plugins: {
    datalabels: {
        display: false,
    },
}

Why the labels under chart are not corresponding with labels in legend in Chart.js for bar chart?

The data.labels defines the ticks for a category axis. Following your configuration, the chart is expecting to have 3 data items for dataset, (first at tick 'a', second at tick 'b', third at tick 'c').
Instead, the dataset.label are used in the legend.

In your config, all datasets have got only 1 value and all values are related to the first data.labels, 'a'.

Update chart axis labels after hover - chart.js

You could combine your afterEvent plugin with a ticks.callback function as shown below:

options: {
  scales: {
    y: {
      beginAtZero: true,
      ticks: {
        callback: value => value + (this.isHoveringYAxe ? '$' : '')
      }
    }
  }
},
plugins: [{
  id: 'customHover',
  afterEvent: (chart, args) => {
    const event = args.event;
    if (event.type == 'mousemove') {
      if (event.x < chart.scales.y.width && !this.isHoveringYAxe) {
        this.isHoveringYAxe = true;
        chart.update();
      } else if (event.x >= chart.scales.y.width && this.isHoveringYAxe) {
        this.isHoveringYAxe = false;
        chart.update();
      }
    }
  }
]

Please take a look at your amended StackBlitz and see how it works.

Limit Labels Number on Chart.Js Line Chart