Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

align text inside chart for far-aligned labels #8269

Closed
wants to merge 1 commit into from

Conversation

iamarcel
Copy link
Contributor

@iamarcel iamarcel commented Jan 4, 2021

When you have long labels on a horizontal chart that get cut off, the end is cut off by default. If I change the alignment to "far", the text alignment is okay but the wrong side of the labels is still shown.

For example, with labels on the left side and crossAlign "far", you'd see the end of the longest labels and white room for shorter labels.

With these changes, the labels would start on the left side so you see the beginning of the labels:

CleanShot 2021-01-04 at 12 24 33

Copy link
Member

@kurkle kurkle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How are you constraining the scale size? It should take more room with long labels by default.

Some tests are failing, take a look at those.

src/core/core.scale.js Outdated Show resolved Hide resolved
src/core/core.scale.js Show resolved Hide resolved
@iamarcel iamarcel force-pushed the master branch 4 times, most recently from c0e8baf to ec80df6 Compare January 18, 2021 15:50
@iamarcel
Copy link
Contributor Author

How are you constraining the scale size? It should take more room with long labels by default.

In the screenshot (and the application where we'd want this feature) I'm overwriting axis.width in afterFit to a fixed value. But you can reproduce as well by just making the labels long enough, at some point Chart.js stops expanding the space for the labels.

Copy link
Member

@kurkle kurkle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was wrong the first time, you should use the full chart size in scale direction, because the margins in the corners are also available for labels.

Added a suggestion, would that work correctly?

I think you should add an fixture test for this feature.

src/core/core.scale.js Show resolved Hide resolved
width: 512
}
}
};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding tolerance: 0.01 might help it pass in both browsers.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@iamarcel are you able to try this out? Would love to get this merged

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That will fix it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for continuing this while I was out and half forgetting about this! :)

@kurkle
Copy link
Member

kurkle commented Feb 1, 2021

This was merged in #8359

@kurkle kurkle closed this Feb 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants