How do I prevent the scale labels from being cut off in chartjs?

问题

I am having a problem with chartjs where the scale labels are being "cut off" in the following way:

[1]

Is there a margin that can be set? I don't see anything in the chartjs documentation about this, and these seem to be contained within the chartjs canvas element (meaning: not covered by another div).

回答1:

Add scale label option with whitespace before value. 2 or more whitespaces is allowed.

scaleLabel: "<%= ' ' + value%>"

回答2:

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

回答3:

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 } 
}

来源：https://stackoverflow.com/questions/26498171/how-do-i-prevent-the-scale-labels-from-being-cut-off-in-chartjs

标签

chart.js