When Resizing Chart, Legend can Overflow into the Chart

[gkemp94]

When resizing a chart with lots of legend items on the left, the labels can overlap onto the chart.

Steps to Reproduce (for bugs)

Code Pen

1. Open Codepen
2. Resize preview window horizontally and notice that the final item at overlaps the chart

Context

We have a chart with lots of datasets, it works fine until it's resized within it's container and then sometimes the labels overlap onto the chart.

Environment

• Chart.js version: Latest Version
• Browser name and version: Chrome Latest Version

[gkemp94]

Took a look at this to see what was going wrong, seems as though it's calculating the layout of the legend box assuming full height but then when calculating layout of the boxes we clip the area by the height of both the bottom & top boxes. A solution might be to treat vertical boxes the same as horizontal boxes and if fullWidth is true, prevent the legend box being clipped.