[BUG] Legend hides second column if has only one element

[Don-Pat]

I am using Chart.js 2.7.2.

I have this chart where I have a variable number of line datasets I add or remove real time.
The legend is on the right, but there is this problem:
-Up until 14 datasets there is no problem: the legend shows only one column. (first snapshot)
-Here is the issue: If I have exactly 15 datasets, the last one goes on the second column and it becomes partially hidden and unclickable. (second snapshot)
-However, If I have more than 15 datasets, it works as intended: it shows two columns. (third snapshot)

This happens every time the "new column" has only one element (eg 29 or 43 datasets in my example) and the canvas is responsive to his container size.

I set up this jsfiddle showing the issue: http://jsfiddle.net/jkgsLg7e/6/
You can use the DATASETS variable to play with the number of datasets.

It looks like there is a bug in the way the chart decides to resize itself.

[Don-Pat]

Is there any suggestion on how to workaround this issue until it is fixed?

[Don-Pat]

Is there any suggestion on how to workaround this issue until it is fixed?

Still facing this issue.

[jtagscherer]

Hey there, I took a stab at this issue and found a discrepancy between the fit and draw functions of chart legends, where the former did not respect initial column padding. I added this padding in pull request #5776, which worked to fix the issue in the JSFiddle.

@Don-Pat While the fix has not been deployed yet, you can try working around this issue by avoiding the edge case height that causes it. For example, you could set the height of the chart in your JSFiddle to something less than 400 or greater than 409 pixels rather than the original 400 pixels.