Polar Chart on documentation page is cut off in Chrome

[lonerzzz]

Expected Behavior

The polar area chart should render with enough top and bottom margin to include the entire chart and labels.

Current Behavior

When the polar area chart is rendered in Chrome as per the example page, (https://www.chartjs.org/docs/latest/charts/polar.html) the very bottom of the chart is clipped. The same problem occurs if the legend is disabled, resulting in the number labels being cut off at the top of the chart.

Possible Solution

Not sure.

Steps to Reproduce (for bugs)

The problematic example is right on the documentation page as mentioned in the Current Behavior section.

Context

The chart looks mangled which is not good for presentation.

Environment

• Chart.js version: the current one used for the polar chart documentation page of chart.js and 2,7.3
• Browser name and version: Chrome 73.0.3683.103

[kurkle]

This comes from #5914

I think it goes wrong here:

Chart.js/src/scales/scale.radialLinear.js

Line 422 in 4e349a0

me.yCenter = Math.floor(((maxTop + maxBottom) / 2) + me.top + me.paddingTop);

Or here (used to calculate paddingTop):

Chart.js/src/scales/scale.radialLinear.js

Line 71 in 4e349a0

return valueOrDefault(tickOpts.fontSize, defaults.global.defaultFontSize) + tickOpts.backdropPaddingY * 2;

@nagix want to take a look?

[nagix]

The documentation page is using Chart.js 2.5.0. #5848 fixed this issue and the fix is included in 2.8.0.

[etimberg]

Closing per the above comment. v2.8 shipped a while ago