Updating the chart after adding data and label doesn't render the dataset properly

[KucaKun]

Expected Behavior

When a chart is updated with a data point and a label, it should render itself properly.
It shouldn't matter if the datapoint is added before the label as in:
chart.data.datasets.forEach((dataset) => { dataset.data.push(data); }); chart.data.labels.push(label); chart.update();
Or after the label:
chart.data.labels.push(label); chart.data.datasets.forEach((dataset) => { dataset.data.push(data); }); chart.update();

Current Behavior

Instead the chart doesn't render properly when the datapoint is pushed to the array before the label.

Possible Solution

There are two ways to fix that:

• State in the documentation clearly that data should be added after the label and the order of operations matter,
• Change it so the order of adding data and labels before update doesn't matter (here I can't be of any help, but I noticed there's a listener on the chart.data.dataset[n].data array.)

Steps to Reproduce

Here's a codepen for this issue. Top chart is rendered properly, while at the bottom chart there is no line, sometimes it shows up (for example when you resize the page), there are no errors or notices in the console.
https://codepen.io/KucaKun/pen/oNZxEjK

Environment

• Chart.js version: 3.2.1 and latest master at the time of creating this issue
• Browser name and version: Firefox 88.0.1 and Chrome 90.0.4430.93 (Both on UBUNTU 18)

[LeeLenaleee]

It seems to work half, if you add the label first and then the datapoint it gets animatited correctly, if you add the data first and then the label it has some kind of a delay without animation. If you set the delay on your interval to a bit higher you will see that both charts will update with the data so it is regestering the data.

My guess is that it somewhere in the animation it doesnt like that the data is added first, if you set animation duration to 0 it will also work fine with smaller interval

Larger interval pen: https://codepen.io/leelenaleee/pen/QWpNQVx
0 duration animation pen: https://codepen.io/leelenaleee/pen/PopNQxK

[KucaKun]

Oh, let me add to that, both ways work when you use chart.update("none")

[kurkle]

Not sure how it relates to animations, but I think the behavior comes from the hooks that are attached to the data array. The hooks are used to detect changes, and I think we are prosesing the changes to some level right away (parsing the data). Ideal fix would probably be to postpone the parsing to the actual update call. I think we'd need to record the dirty zones that need to be parsed. (or maybe the opposite, have clean zones on record)
@etimberg thoughts?

[etimberg]

I think it is the hooks and the parsing during the hook. Now that we used the parsed variables for everything, we notice the problem. Marking as dirty could be ok, but I'm not sure if the update order needs to be kept. I think it does, otherwise the metadata array gets out of sync. Another option is to keep the hooks as is, but also mark the spots dirty and then do a final update/parse when update() is called