x-axis labels getting cut off if they're too long

[dibsyjr]

Hi,

I've noticed that with longer x-axis labels they will get cut when at smaller window sizes. Is this a bug or is there some way of defining the amount of padding around the chart? I've seen other issues regarding padding but for different reasons.

Also if there's a title then they overlap each other.

The first image is of the chart at a larger window size. The second is at a smaller window size

[KoalaBear84]

I'm having the same issue with v2.

Is this v2? If so, how do you have a line graph without those Points? :)

[dibsyjr1]

Yeah it's v2, the problem I was facing with the points was if I had a radius of 0 I couldn't make the tooltip appear (because I think it basically makes it so that the points don't exist and anything related to them doesn't either including hitRadius), so at the moment i've given them a radius of 0.1 (which is a bit of a hacky fix to be able to actually hover over the points).

To do this how i've done it:
options = { elements: { points: { radius: 0.1, hoverRadius: 3 } } }

radius makes the points almost non-existant and hoverRadius makes them larger when hovered over to make it clearer what point's being hit

[KoalaBear84]

Great. I've put it to 0.001, just to be sure. And read in another ticket that 0 was supposed to work, but is a bug and will be fixed. :)

[dibsyjr1]

Ah nice, well hopefully that's sorted by the end of beta then. :)

[etimberg]

The radius 0 should already be fixed in the v2.0-dev branch

[dibsyjr1]

Awesome thanks @etimberg, any ideas about the x-labels being cut off and if it could be a bug or a problem on my part?

[etimberg]

@dibsyjr1 it's a bug. I've seen it before and I know the cause. I'm unsure of how to fix it though. Essentially what happens is that the scale first thinks that the labels will be rotated, but then the size changes and the rotation does as well. Unfortunately, the size doesn't increase to account for the increased rotation.

[dibsyjr1]

Ah yes, I see. I thought it was odd that the rotation when it seemed like it shouldn't. If I understand what you're saying is happening correctly would it not be better to have rotation happen until the point where it has to start skipping labels and then once that happens just ignore the rotation from then on? That way there should be no confusion when calculating the size of the chart area. But yeah, this does sound like a tricky one.

[etimberg]

Yeah, it get's really complicated. The fitting algorithm is in https://github.com/nnnick/Chart.js/blob/v2.0-dev/src/core/core.layoutService.js#L38-L320

At a high level, it works by doing the following:

1. Get all of the scales to fit to a maximum size. The scales return their minimum size
2. Place scales onto the canvas area and refit at their minimum size
3. Relax the sizing to allow some scales some extra room. This allows the rotated labels of the x axis to be underneath the vertical scale.

It goes wrong when refitting the scales at their minimum size.

[joeshub]

I wonder if I'm having a similar issue?

By default too many labels are shown which are auto-rotated. The last point on each lines gets cut off on the right edge.

    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
        format: 'YYYY-M-DTH:m:sZ',
        displayFormat: 'M/D',
        tooltipFormat: 'M/D',
        displayFormats: {
          'day': 'M/D'
        }
      },

On the flip side, when setting unitStepSize to a smaller number, labels get cut off from the bottom.

    xAxes: [{
      type: 'time',
      time: {
        unit: 'day',
        format: 'YYYY-M-DTH:m:sZ',
        displayFormat: 'M/D',
        tooltipFormat: 'M/D',
        unitStepSize: 7,
        displayFormats: {
          'day': 'M/D'
        }
      },

All this starts when you start setting up custom formatting. One hack I've found is adding a bunch of ninja spaces to the displayFormat, but that's not ideal since the labels are still rotated.
displayFormat: '                   '+'M/D',

Can you think of any workarounds for the time being? Thank you!

[ShakurOo]

Add static value at line 5867 for cover all the heatbox of the labels.

            // Recalculate because the size of each layout might have changed slightly due to the margins (label rotation for instance)
            totalLeftBoxesWidth = xPadding;
            totalRightBoxesWidth = xPadding;
            totalTopBoxesHeight = yPadding;
            totalBottomBoxesHeight = yPadding + 10; // <== Custom