v3 Regression: Point cropped when indicating max or min values for scales

[beibean]

Expected Behavior

Points should be fully drawn on limits.

Current Behavior

When we indicate scale limits and a point drops on that limit, this point is cropped.

Possible Solution

Direct solution from app is just not indicating those limits. But it's not fully acceptable since:

• In v2.9.4 it was working.
• If we indicate limits, chartjs does not have to work on them and should be faster.

Steps to Reproduce

• See in the example scales->y->min is set to 0 and that point is cropped.
• If you set scales->y->max to 1, that point is also cropped.
• If you remove min and max, points are not cropped.

https://codepen.io/beibean/pen/PomNmqe

Context

Migrating from v2.9.4 to v3.4.1

Environment

• Chart.js version: v3.4.1
• Browser name and version: Chrome (any version)
• Link to your project: https://codepen.io/beibean/pen/PomNmqe

[kurkle]

try clip: false

[beibean]

try clip: false

This helped a lot!
I didn't know the existence of this property.
Not setting it to false, but playing with its value works perfect for my case.

Thanks!

[beibean]

After checking the behaviour of setting clip: false | number with other graphs I have, I cannot consider it valid since lines are drawn outside axis, and even some points outside range are shown.

Here are some examples with clip:false:

Some examples with clip:6 (my pointHoverRadius to draw the entire point):

[kurkle]

And did you try with clip: 3, since you only want up to 50% of the point outside, right?

[beibean]

Yes, I tried as well and the same problem persists, but with less pixels.
Besides, when hovering on the limit point, this is cropped, that's why I used the pointHoverRadius.

Here you can see some examples with it:

[etimberg]

Why is this different when min is explicitly specified?

1. We generate clipping for items on the scale that is used for drawing https://github.com/chartjs/Chart.js/blob/master/src/core/core.datasetController.js#L678
2. The clip is set to 0, if the min or max on the scale is explicitly set https://github.com/chartjs/Chart.js/blob/master/src/core/core.datasetController.js#L15-L16

The thinking behind defaulting to 0 is that if a max/min has been specified, the user has specified a hard limit for the axis and doesn't want to see any data beyond this point. This behaviour was first introduced in #6642

If you want the minimum to be 0, beginAtZero might be a better option but it doesn't fix the line issue. My take on this is that right now it is performing as designed. Perhaps we can figure out a way for specifying different clip values for the points vs the line itself, but I'm not sure how complicated that would get. @kurkle any ideas?

[beibean]

I can now see why it's behaviouring like that. In respect with suggestions I wanted to share with you the use case:

• I use chartjs to draw values over time in different ranges (hour, day, week). So min and max is continously changing.
• Point before min and point after max are also passed to dataset. This way, graph is not cropped and lines are drawn until limits.
• So the problem is that in many times, points drops exactly on the axis limits.

About suggestions:

If you want the minimum to be 0, beginAtZero might be a better option but it doesn't fix the line issue. My take on this is that right now it is performing as designed. Perhaps we can figure out a way for specifying different clip values for the points vs the line itself, but I'm not sure how complicated that would get. @kurkle any ideas?

• As said before, minimum is not always 0. Besides, as you comment, it will not fix the line issue.
• This may be performing as designed but, is it really the proper design? For this particular case, I think the expected behaviour should be the one in v2.9.4.
• Would specifiying different clip value for the point draw out of range points which are very close to axis?

[kurkle]

I think the solution would indeed be different clipping for different elements, or having clipping configured per layer while being able to specify the layer per dataset/element type.

[kurkle]

This may be performing as designed but, is it really the proper design? For this particular case, I think the expected behaviour should be the one in v2.9.4.

In 2.9.4 only the line is clipped, points are drawn without clipping.

Would specifiying different clip value for the point draw out of range points which are very close to axis?

I think this is actually a separate issue (bug). The points that make the visible line segment are looked up and drawn, but this includes the next points outside the area, because the line needs those to draw correctly. The actual points should not be drawn though.

[beibean]

Just tested on chartjs v3.6.2 and has not been fixed.

Any plans to fix it in the near future?

PS: I just updated the project link to use last chartjs v3.6.2.

[DoobleD]

Any plans to fix it in the near future?

Using clip: false solve it for me, see #6414 (comment).