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

Legend: fix layout padding handling #9290

Merged
merged 1 commit into from Jun 19, 2021
Merged

Conversation

kurkle
Copy link
Member

@kurkle kurkle commented Jun 19, 2021

#Fix #9278

There would still be a lot to clean up, but I don't have the time currently.

The positioning of items is duplicated, first one that calculates the rows/columns is done in fit, where the dimensions are what were set in setDimensions. core.layouts updates the coordinates there:

if (layout.horizontal) {
box.left = box.fullSize ? userPadding.left : chartArea.left;
box.right = box.fullSize ? params.outerWidth - userPadding.right : chartArea.left + chartArea.w;
box.top = y;
box.bottom = y + box.height;
box.width = box.right - box.left;
y = box.bottom;
} else {
box.left = x;
box.right = x + box.width;
box.top = box.fullSize ? userPadding.top : chartArea.top;
box.bottom = box.fullSize ? params.outerHeight - userPadding.right : chartArea.top + chartArea.h;
box.height = box.bottom - box.top;
x = box.right;
}

Notice the userPadding.right used for box.bottom

So the top that was set to 0 is updated to the padding value, and the height updated accordingly. This makes the items split in columns earlier than fit would have thought.

The fix

  • Use correct layout padding for fullSize box bottom
  • Use margins.top and margins.left in setDimensions

Chore

  • Remove the top variable and use itemHeight instead of fontSize for calculating the column height.

@kurkle
Copy link
Member Author

kurkle commented Jun 19, 2021

Filename Size Change
dist/chart.esm.js 70.8 kB +1 B (0%)
dist/chart.js 89.9 kB -3 B (0%)
dist/chart.min.js 64.1 kB +1 B (0%)

@etimberg etimberg added this to the Version 3.4.0 milestone Jun 19, 2021
@etimberg etimberg merged commit 87bd578 into chartjs:master Jun 19, 2021
@kurkle kurkle changed the title Fix legend coordinate handling Legend: fix layout padding handling Jun 20, 2021
@kurkle kurkle deleted the legend1 branch July 20, 2021 19:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Uncaught TypeError: Cannot read property 'height' of undefined
2 participants