Transitioning line chart has unsettling overlap effect as x-axis expands
I am building a line chart which I would like to transition when a new dataset comes in from an API. Not only will the values (y-axis) change, but also the date range (x-axis) which is being viewed.
The problem is (for me) when the time period grows, the parts of the line on the left take longer to get where they are going than those on the right (because they have farther to travel to accommodate the new data's required room) and consequently the line overlaps itself as it transitions leftward.
Is this even a UX "bug" or is it just annoying to me?
If it is, is there a canonical way to resolve this?
I like the way the transitions look on the axes and on the line (when it does not do its overlap thing). Perhaps I should consider just animating the axes and fading-out/fading-in the chart when data arrives. That might be an overwhelming amount of animations though, especially considering there is a pie chart below that will also have its slices transitioning as new data arrives.
The below CodeSandbox is just randomly generating some dummy data, so you will probably have to click the Update button a few times to see the effect.