Line cut off when yAxes display set to false

[ashbuilds]

Hi, Setting display yAxes to false cutting of the line from top please check fiddle below:

https://jsfiddle.net/2f9768gp/ - v2.4
https://jsfiddle.net/bd052hz8/4/ - v2.9.3 (happing on both display false or true)

In the above fiddle please change display to false and the line will be overflow from canvas.

Expected Behavior

Line should not cross yAxes when display is false

Current Behavior

Line is cutting off from top

"chart.js": "2.9.3"

[benmccann]

This may have been fixed in 3.0 if you'd like to try out 3.0.0-alpha:

• Release notes
• npm
• Migration guide
• Docs
• API
• Samples

[ashbuilds]

@benmccann Thanks for the update but i'm not ready for alpha as it has some breaking changes. I fixed above issue by changing the min and max and tried to add padding using floor/round it worked for now :)
I'm excited for the release of 3.0, please keep me up to date. Thanks 🤘
You can close this issue if you think it will not be a problem in 3.0, have an awesome day :)

[kurkle]

I'm not sure why you are specifying the min, max and beginAtZero. Probably has to do with your real use case rather than this example.
The display = false should not actually have an effect here, but the max does.
What goes wrong if you don't specify max?

Another workaround is to use layout padding: https://jsfiddle.net/shm2ovtq/

[ashbuilds]

@kurkle Please don't mind beginAtZero :)
And if i didn't set max then it is defining max to 5, which reflects different results when we have more than one dataset. Also if line max is 4.55 in our use case it should touch the top tick to exact 4.55, I know which is like rarest use cases of all.

display false/true did reflect some changes, please check out: https://jsfiddle.net/2f9768gp/ - v2.4
But with the new version(v2.9.3) of chartJs display is not reflecting any changes.

Thanks for your workaround. 👍

[ashbuilds]

@kurkle @benmccann Also just checked on v2.9.3 its happening here too : https://jsfiddle.net/qz7be69u/2/

[benmccann]

I was originally thinking this might be a duplicate of #6631, but it looks like that one was maybe fixed in both 2.9.3 and 3.0, so perhaps this is a different issue. It'd be good to test against 3.0 to see if there's anything left to fix here

[ashbuilds]

@benmccann I think its something to do with min/max rounding function in ChartJs. If i have that i can round my data point and it might work properly.

[kurkle]

@ashbuilds the center of the line is at the value. So half of it is going to be out of chart area when max is se to that value. Another thing is tension that allows the line to actually go over that value to make it look smooth. (monotone does not do that)
So just either use the padding or add a little (chart area height / scale range * points, where points is the number of pixels needed, line width/2 or point radius for example) to the max.
I don't think there is a generic way to improve this. Because if you set the max to 2 for example, do you think the whole line should still be visible? How about line width of 20? What about pointHoverRadius 100, should the chart have 50 pixels room above the point to make the hover effect fully visible?
I think that would not be desirable in other use cases. Ex: when using min/max for zooming.

[etimberg]

Closing per the above discussion; using padding is the best way to achieve this at the moment