[FEATURE] Realtime Line Chart: Animation gap after shift()

Expected Behavior

Using a line chart, after I remove the first item of the data array and the first label, the remaining data points move from right to left. This is a useful setting for a realtime data chart.

The second data point should move to the first position while keep showing the line to the first point and the colored area below until the second data point is on it’s final position.

Current Behavior

While the second data point moves to the first position there is a gap without a line and without a colored area below.

Possible Solution

Change the animation after chart.dataset[0].data.shift(); chart.labels.shift(); is called.

Steps to Reproduce (for bugs)

See the following Plunker example (uses angular version ng2-charts, but has the same behavior than using charts.js directly): http://plnkr.co/edit/y0gKnQrv3PlIW5NgmXm0

Context

I want to use charts.js resp. ng2-charts to display realtime data that has a constant number of data points. As new data points are emitted the most left data point is removed. As I remove this first data point the gap animation occurs.

Environment

See link above. I tested it locally with the newest library versions and experienced the same behavior.

[simonbrunel]

@nagix plugin might be helpful?! (demo)

[kurkle]

With a little bit of trickery it can be made smooth for v3 (might work for v2 too): https://jsfiddle.net/dukfqjyr/ Requires unique labels (should work fine with other types of scales with little tweaking)

This is the workaround @etimberg described above.