display live data in a line chart

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior If I insert a new data point to a line chart, all data points will be animated. This will lead to a messy data visualization.

At first I tryed to simply push new data points, but it looks like change detection does not recognize this. this.multi[0].series.push(data); Rewriting the whole array works but leads to the described behavior. this.multi[0].series.push(data); this.multi = [...this.multi];

Expected behavior Only the the line for the new data point should be animated. Otherwise it would be good to have a option flag, to turn off animations.

Reproduction of the problem I created a plunkr to show the current behavior:

https://plnkr.co/edit/FXA7r6ISQguTrqAF5YS5?p=preview

What is the motivation / use case for changing the behavior? I would like to create a chart that shows realtime data. Like flot chart does in this example: http://www.flotcharts.org/flot/examples/realtime/index.html

Environment:

• ngx-charts version: 5.3.1
• Angular version: 4.0.0
• Browser: [Chrome]
• Language: [ TypeScript 2.3.2]

Thank you for your feedback.

[zerodrift]

Any updates on this?

[cole21771]

An alternative to the fancy horizontal animation (which would be nice), would be to just turn off animations. It isn’t nearly as nice as with horizontal interpolation, but it works.

It looks like this (using a fork of the plunker found above): https://plnkr.co/edit/6GHWvXPZvanbB1FR8dum?p=preview