[Chartjs]-How do I prevent the scale labels from being cut off in chartjs?

You can also set a padding in the layout configuration (in chart.js 2 at least):

options: {
    layout: {
        padding: {
            left: 10
        }
    }
}

http://www.chartjs.org/docs/latest/configuration/layout.html

Here’s my hack – was scratching my head for a while until I found this post – thanks Jean-Baptiste Martin – your code lead me to this…

Given a dataset like [201, 203, 20004, etc.] – I grab the biggest and get length. 7 padding per character seems to work for me. length – 1 is to subtract 1 since the first character shows up fine for me – only need to add padding for all the other characters lopped off.

Hacky but this seems to work (on v 2.8) – I tested numbers up to like 40854385394 down to just single digits and it good enough for me!

options: {
  layout: { padding: { left: (this.data.reduce((a, b) => a > b ? a : b).toString().length - 1) * 7 } 
}

The behavior of chart.js may have changed since this questions was originally posted. With v2.9.3, I only see this problem if the y-axis ticks include a mixture of integer & floating-point values. In this case (unfortunately my predominant case), the digits past the decimal point get clipped.

Below is what worked for me. In my solution, when there is a mixture of int & float, I just set a constant amount of padding (30px) to accommodate the floating-point digits; you may need a different value. Hopefully this helps some other soul avoid a day of struggle.

yAxes: [
    {
        ...
        ticks: {
            callback: (value, index, label_values) => {
                // Once per cycle through all the ticks, set the label padding appropriately
                // For unknown reasons sometimes chartjs passes a 1-point values array, which has no meaning. Ignore those.
                if (label_values.length > 1 && value === label_values[0]) {
                    // If labels have mixture of int & float, manually set the padding to give enough space for the decimal places.
                    const mixed_int_and_float_labels = label_values.some(v => Number.isInteger(v)) && !label_values.every(v => Number.isInteger(v));
                    this.chart.options.layout.padding.left = mixed_int_and_float_labels ? 30 : 0;
                }
                return value;
            }
        },
    }
]

I’ve encountered the same problem while creating a horizontal bar graph, I followed @Andrei Zhamoida’s answers and looked up at the Chart.JS documentation regarding ticks.

Here’s my solution:

scales: {
    y: {
        ticks: {
            callback: function (val, index) {
                return '   ' + this.getLabelForValue(val);
            }
        }
    }
}

Documentation: https://www.chartjs.org/docs/latest/axes/labelling.html?h=scalelabel

In my scenario I was having the far right label on the x axis getting cut off.
What fixed my case was adjusting layout padding.

layout: {
    padding: {
         right: 20
    }
}

For me the issue was with setting up sampleSize which I used to make the chart rendering faster.

scales: {
  y: {
    ticks: {
      sampleSize:1 
    }
  }
}

This option sets the number of elements (in this example for the y axis) to calculate the space for ticks and when for example the first number is 5 and second 10, then there will not be enough space for 10

From docs (chartjs v3.6):

The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.