chartjs / chartjs/Chart.js

Animation glitching when changing scale min and max

Open
#10,674 8 comments 1 reaction 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

I am using the min max scale for the time axis chart: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#min-max-configuration

Because I need to 'change page' because I have too much data and I use the scale to get from one point of the graph to the next.

my project is really starting to look good and work very well, but unfortunately for me I stumbled across that small visual 'glitch'
I have no cue of what could be causing that, really I tried a lot of things, even checked if my dates were ordered properly, but the only thing that resolve the issue is using different min max values or using less data in the chart

### Current behavior

The chart have a blue line created across it while it animate(visual glitch)

### Reproducible sample

https://codepen.io/djaeofkao/pen/dyevQLv

### Optional extra steps/info to reproduce

You may need to click on the preceding page button a couple time, but the bug always reappear.

I quickly took a screenshot of the behavior: https://photos.app.goo.gl/N7JJQvaVu6qSnGUB8

### Possible solution

I would still consider myself a newbie, so unfortunately I really don't have a solution. But as always I have a huge respect for everyone contributing to the chart.js library, it serve my project really well!

### Context

I have a 'paging system' because I have a lot of data so I use the scale min max property to move across the chart

### chart.js version

3.9.1

### Browser name and version

Chrome 103.0.5060.114

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.