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

Big right spacing causes part of legend to be clipped. #6497

Closed
KacperMadej opened this Issue Mar 22, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@KacperMadej
Contributor

KacperMadej commented Mar 22, 2017

Expected behaviour

Legend fits in chart.

Actual behaviour

Legend is clipped on left side.

Live demo with steps to reproduce

https://jsfiddle.net/4be6gddy/
(in Win/Chrome clipping is bigger and first items for each legend rows are not visible
chart 2
)

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Mar 22, 2017

Contributor

@TorsteinHonsi - how should we resolve that issue? I see two possible solutions:

  • according to the docs we should apply spacings when calculating width of the legend here. However, this will change how legend is rendered and some of the tests will fail. For example:
    screen shot 2017-03-22 at 15 28 37

  • change aligning box here, so we align it to the correct bounding box

Contributor

pawelfus commented Mar 22, 2017

@TorsteinHonsi - how should we resolve that issue? I see two possible solutions:

  • according to the docs we should apply spacings when calculating width of the legend here. However, this will change how legend is rendered and some of the tests will fail. For example:
    screen shot 2017-03-22 at 15 28 37

  • change aligning box here, so we align it to the correct bounding box

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Mar 23, 2017

Collaborator

I think the first solution - it should be something like:

if (horizontal && legend.itemX - initialItemX + itemWidth >
				(widthOption || (chart.spacingBox.width - 2 * padding - initialItemX - options.x))) {

But then I don't understand why it wraps in the test you picture above. The alignment to spacingBox looks correct to me.

Collaborator

TorsteinHonsi commented Mar 23, 2017

I think the first solution - it should be something like:

if (horizontal && legend.itemX - initialItemX + itemWidth >
				(widthOption || (chart.spacingBox.width - 2 * padding - initialItemX - options.x))) {

But then I don't understand why it wraps in the test you picture above. The alignment to spacingBox looks correct to me.

@pawelfus

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Mar 23, 2017

Contributor

I agree, the alignment to spacingBox is correct, so I would do the same fix as yours. Now just simply build and run test 2104,2181 in the test suite and you will see the legend in two rows. I am worried that many users will come and report this as a bug. It can change drastically how chart is rendered, not always though (in our tests it is ~3 failing tests because of this change).

Contributor

pawelfus commented Mar 23, 2017

I agree, the alignment to spacingBox is correct, so I would do the same fix as yours. Now just simply build and run test 2104,2181 in the test suite and you will see the legend in two rows. I am worried that many users will come and report this as a bug. It can change drastically how chart is rendered, not always though (in our tests it is ~3 failing tests because of this change).

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Mar 24, 2017

Collaborator

Yes I saw the same - but it shouldn't happen because it is well within the spacing box even with one row. I'll check some more.

Collaborator

TorsteinHonsi commented Mar 24, 2017

Yes I saw the same - but it shouldn't happen because it is well within the spacing box even with one row. I'll check some more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment