Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Line drawn outside min/max since 2.9 #6631

Closed
MaartenBent opened this issue Oct 28, 2019 · 6 comments · Fixed by #6642
Closed

Line drawn outside min/max since 2.9 #6631

MaartenBent opened this issue Oct 28, 2019 · 6 comments · Fixed by #6642
Labels
type: bug
Milestone
Version 3.0

Comments

@MaartenBent
Copy link

Expected Behavior

The line should start at min and stop at max, as it did in 2.8.0:
2 8

Current Behavior

The line is drawn outside min and max in 2.9.1. Note that this only becomes obvious when increasing the borderWidth.
2 9

Steps to Reproduce (for bugs)

Click here to expand and see the example code used for the images above. 
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<script src="https://www.chartjs.org/dist/2.9.1/Chart.min.js"></script>
</head>
<body>
	<div><canvas id="canvas"></canvas></div>
	<script>
		window.onload = function() {
			Chart.Scatter(document.getElementById('canvas').getContext('2d'), {
				data: {
					datasets: [{
						borderColor: 'red',
						data: [{x:-5,y:5},{x:-4,y:6},{x:-3,y:7},{x:-2,y:6},{x:-1,y:5},{x:0,y:4},{x:1,y:3},{x:2,y:2},{x:3,y:5},{x:4,y:7},{x:5,y:9}],
						fill: false,
						showLine: true,
						borderWidth: 20,
						pointRadius: 0,
					}]
				},
				options: {
					legend: {
						display: false
					},
					scales: {
						xAxes: [{
							ticks: {
								min: -2,
								max: 3
							}
						}]
					}
				}
			});
		};
	</script>
</body>
</html>

Environment

  • Chart.js version: 2.9.1
  • Browser name and version: Chrome 78
  • Link to your project: n/a
@benmccann
Copy link
Contributor

Hmm, it looks like it always drew outside the bounds in the y-direction (#6540), but we have a regression in the x-direction. It shouldn't escape in either direction though

@kurkle
Copy link
Member

kurkle commented Oct 29, 2019

This comes from #6285 and is limited to borderWidth / 2
The points are updated outside though (and drawn, but clipped)

If we don't update the points outside scale bounds, then the line will end at the last point before that:
image

If we clip strictly to chartArea:
image

So there are at least 2 ways it is expected to work.
Why is it acceptable to draw below chart area in this case (Expected Behavior)?

@kurkle
Copy link
Member

kurkle commented Oct 29, 2019

Another example (2.8 like):
image

Is this what you would expect?

@MaartenBent
Copy link
Author

MaartenBent commented Oct 29, 2019 •
edited
Loading

As a user I would expect the 3th one (#6631 (comment)), because I only limit the x-axis scale.

Will the 1st one still work when there is no point at the min scale value? For example with data [{x:-5,y:5},{x:-1,y:2},{x:5,y:6}] will it start at x=-1 now?

I do not limit the y-axis scale range, so I expect to see the line entirely, not partially cut (2nd image).
Though maybe it should get a range of 1-9 so it does not overlap the x-axis?

This was referenced Oct 29, 2019
Merged
Merged
@MaartenBent
Copy link
Author

Thanks for the quick fix, 2.9.2 works as expected.

Can this issue be closed, or does it need to be merged in to master as well?

@kurkle
Copy link
Member

kurkle commented Nov 5, 2019

Its not fixed in master yet.

@etimberg etimberg added this to the Version 3.0 milestone Nov 10, 2019
@benmccann benmccann mentioned this issue Mar 14, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: bug
Projects
None yet
Milestone
Version 3.0
Development

Successfully merging a pull request may close this issue.

Versatile clipping kurkle/Chart.js
4 participants
@benmccann @etimberg @MaartenBent @kurkle