Chart.js: [BUG] 2.7.0 hides/clips part of chart

[knod]

Note: I think it's a different problem than #4759. That problem might have to do with total chart padding and this doesn't (I've tested). Here, specifically the top of a <Line> chart is getting clipped/cut off early.

Expected Behavior

Should be able to see items on all sides of the chart, as it was working in v2.6:

Current Behavior

Once updating to v2.7, the top of the chart gets cut off:

Possible Solution

Edit: So far, the padding I've been able to add is to the outside of the whole chart, not to just an axis itself. I'll keep looking for a way to do that.
I think you can add extra padding to make it work, but is this the indended behavior to start with? Is that the intended solution? Is the chart being created incorrectly (see below)? If so, it's not a bug, but then a note about padding could be added to the docs because it seems non-obvious. To be fair, maybe it's there and I didn't see it.

Steps to Reproduce (for bugs)

A link to the gh-pages live example would be useless because that code is going to change, but here's a pastebin of the current code:

https://pastebin.com/yeBLmXiU

Context

I'm not sure if it's relevant, but it's meant to be a graph showing effects of income on various other factors.

Environment

• Chart.js version: 2.7
• Browser name and version: Chrome 61.0.3163.100
• Link to your project: Again, the project code is not going to stay the same

[knod]

I've managed to create a sort-of solution. The tops of the lines of the chart still get cut off, but I at least get my own whole line to appear (code here: https://pastebin.com/Q7C7gas8):

It's a bit more space than I want above my top line, though.

[swinterberger]

I am having the same issue on a line chart that is percentage based therefore I often have data points at 100%. Setting max to >100% makes it look quite odd so another fix I have found is to disable the title in the canvas and provide my own title above the canvas.

[minusf]

not a solution but the clipping also goes away if positioning the title to bottom

[pumanitro]

Someone have solution for that ? Or how long have we wait for fixing it ?

[jcopperfield]

The bug is caused by the introduction of the lineHeight (defaults=1.2) parameter for the title. This causes the title box to have a decimal height (default: 34.4px), which due to not rounding values clips the top line of the graph.

Workaround
Set title lineHeight option to 1.

Proposed fix
fix_#4790_BUG_2-7-0_hides_clips_part_of_chart.patch.txt

[etimberg]

@jcopperfield I'm surprised that the lineheight is the cause of the problem directly but the comment about decimal heights made me go and look at the code in detail. It looks like we round line values but chart.chartArea is not rounded. Rounding that in the layout system does improve things but it's still not perfect.

[chdsbd]

I think this may be related to #4202

[tenznhok]

Does this bug fixed now? And how to fix it...

[sunweiyang]

@tenznhok Looks like the bug still isn't fixed. I still have to use @jcopperfield's lineHeight: 1 workaround to avoid this problem.

[nagix]

This is not directly caused by the lineHeight of the title box. In fact, hiding a title, changing lineHeightor adding padding may fix the problem, but not always. I believe the root cause is decimal round-off errors when checking if points are in the chart.chartArea. This explains why those changes can sometimes ‘hide’ the problem.

I created a new PR #5790 to fix it.