No padding between rotated x-axis labels

[airblade]

Hello! I'm using Chart.js v2.1.4. Thank you for the great code :)

I have a bar chart that looks like this:

The x-axis labels are hard to read because there is just about no padding between them.

Here is the same chart produced by Chart.js v1.0.2:

The labels are easier to read because they are rotated more to give more padding.

Is the v2.1.4 behaviour expected? How can I have the labels rotated more so they are easier to read?

I tried adding 15° rotation to the labels like this:

var options = {
    scales: {
        xAxes: [{
            afterCalculateTickRotation: function(scale) { scale.labelRotation += 15; };
        }],
    }
};

This worked but of course it always adds extra rotation so it looks silly on a chart with only a few bars where the labels don't need to be rotated at all.

Many thanks!

[airblade]

P.S. I also noticed the bars are wider in v2.1.4 than in v1.0.2. Is there a way to control the width in v2.1.4?

Update: never mind, I found the categoryPercentage and barPercentage options.

[etimberg]

@airblade you could try using the minRotation option but it's going to force the rotation to be that amount always.

options: {
  scales: {
    xAxes: [{
      ticks: {
        minRotation: 45 // angle in degrees
      }
    }]
  }
}

You could also try a different implementation of afterCalculateTickRotation

var options = {
    scales: {
        xAxes: [{
            afterCalculateTickRotation: function(scale) { 
              if (scale.labelRotation !== 0) {
                scale.labelRotation += 15; 
              }
            }
        }],
    }
};

[airblade]

I prefer your second suggestion though, like my original workaround, it doesn't address the actual spacing between labels.

Am I right in thinking that's controlled by the conditionals in this loop?

while (labelWidth > tickWidth && this.labelRotation < optionTicks.maxRotation) {

Would an amendment like this be possible?

while (labelWidth > tickWidth + 6 && this.labelRotation < optionTicks.maxRotation) {

[etimberg]

Looks like the line where the tickWidth is calculated has an error: https://github.com/chartjs/Chart.js/blob/v2.1.4/src/core/core.scale.js#L219

I think the -6 should be +6

[airblade]

I'm not familiar with the code but, going by the code comment, I think you might be right.

By the way, where do the 2 lots of 3px padding apply? Is it above and below the rotated label, at right angles to the rotated baseline?

[etimberg]

It looks like the 3px are added to the width, so it would be along the rotated baseline. We should probably add a configurable padding that is perepndicular to the baseline

[madmoizo]

+1 for label padding
Is there a way to avoid this kind of render in 2.5 ?

[Arkemlar]

+1 for label padding, even when it is rotated to 90* - it is still hard to read when there are a lot of data lines:

[kurkle]

Closing as this issue has been in #5938 and/or #5922