Ngx-charts: display live data in a line chart

[oliverguhr]

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.

[codegastudio]

Same problem since up from 5.1.2 to 5.3.1

[marjan-georgiev]

This post explains the current behavior, and why it doesn't work like what you describe as the expected behavior: https://bost.ocks.org/mike/path/

We will need to add a special animation when the line chart is used for live data, as it's a pretty common use case.

[zerodrift]

Any updates on this?

[philjones88]

Any updates? Considering using this in a commercial project so project sponsorship/donations to get blockers fixed is possible :)

[uberman4740]

^ Any updates?

[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

[v1shva]

Any updates on this?

[naitik0212]

Any Updates?

[gilmarsquinelato]

I achieved a possible solution!
The solution found is to keep a "local results" in the chart component, and the template consumes it instead of the given by @Input(), and each update adds the newly received data to the local one.

line-chart.component.ts

Note the lines 75, 236 and 282.

[cole21771]

Good news ^! I created a PR for an Realtime option for the line chart. Imgur link to what it looks like here.

[darkguy2008]

So, still no way to have realtime data? The documentation really fails to have good examples...

[cole21771]

Unfortunately @darkguy2008, the best way is to still turn off animations like I suggested here. It doesn't do anybody any favors that they haven't even looked at my PR for adding the animations.