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.

[TCB13]

I'm running 4.4.8 and I see this issue as well. Not really sure if with was the same bug or not.

Setting borderWidth to 2 doesn't solve it. It appears randomly.

[TCB13]

I'm running 4.4.8 and I see this issue as well. Not really sure if with was the same bug or not.

Setting borderWidth to 2 doesn't solve it. It appears randomly.

Found the problem. My X axis are date time strings in "SQL format" and apparently one has to import a date adapter and a 3rd party library to deal with those.

This is a small vanillaJS page so:

<script src="assets/moment.min.js"></script>
<script src="assets/chartjs/chartjs.js" type="text/javascript"></script>
<script src="assets/chartjs/chartjs-plugin-annotation.js" type="text/javascript"></script>
<script src="assets/chartjs/chartjs-adapter-moment.min.js"></script>

new Chart(ctx, {
    type: 'line',
    data: {
        datasets: []
    },
    options: {
      scales: {
              x: {
                  type: "time",
                  time: {
                      tooltipFormat: 'HH:mm:ss',
                      unit: "hour",
                      displayFormats: {
                          "hour": "HH"
  

Note that I wasn't able to use day.js because the adapter is only packaged as a ESM module.