Strange horizontal lines displayed on zoom

[cmccar]

I am plotting a few series of data with a time based x-axis and a numerical based y-axis.

The chart appears as such prior to any zooming:

However, upon zooming into a particular section, I often then see strange erroneous horizontal lines within the chart such as pictured here:

This is the code I use to create and configure the chart (using a screen grab because the "Insert code" functionality seems to remove all the line endings and formatting from my Javascript when I preview the post):

If anyone has an idea as to what may be happening, I would greatly appreciate some insight!

[timKnodel]

I see the same behavior, but only with Chrome. Edge and Firefox do not have the same behavior.

[timKnodel]

Setting the datasets boarderWidth to anything other than 1 fixed the issue for me.

[cmccar]

Ah okay, thanks I appreciate your insight.

I am currently on vacation, but will definitely try changing the borderWidth property to a different number when I'm back and see if that resolves it.

[BorisVanin]

timKnodel , thank you so much! I was looked a solution for that artifact lines for 2 years!!! I use Electron so I forced to use Chrome engine. Now I set borderWidth to 1.1 and horizontal lines disappear. Just curious, how did you find a reason?

[heshamfathi]

@timKnodel I had the same issue and solved it by setting boarderWidth to 2 or anything but 1 and it worked, thanks a ton.

[joeboe17]

Changing borderWidth did not seem to help me, but I found more workarounds. The bug stops when you change the cubicInterpolationMode from 'default' to 'monotone' or if you set lineTension to 0.

[nagix]

The cause of the issue was in bezier control points off the chart, and this has been fixed in chartjs/Chart.js#5937.