Seamless animation between changed data point values doesn't work

[mekwall]

When updating the data of the chart instance, you replace all of it which makes chart.js re-render the chart even though you've only updated the data points. This makes it impossible to animate between changed values.

It would be great if when we only update data points that it would update them them properly so that seamless animation between point values work as intended.

[mekwall]

I got it to kind of work by doing the following inside of updateChart():

var currentData = this.chart_instance.config.data.datasets;
var nextData = data.datasets;

if (currentData.length == nextData.length) {
    var deleteDataSets = false;
    nextData.forEach(function (dataset, sid) {
        if (dataset.length === nextData[sid].length) {
            deleteDataSets = true;
            dataset.data.forEach(function (point, pid) {
                if (currentData[sid] && currentData[sid].data[pid]) {
                    currentData[sid].data[pid] = nextData[sid].data[pid];
                } else {
                    delete currentData[sid].data[pid];
                }
            });
        }
    });
    if (deleteDataSets) delete data.datasets;
    this.chart_instance.config.data = _extends([], this.chart_instance.config.data, data);
} else {
    this.chart_instance.config.data = _extends([], this.chart_instance.config.data, data);
}

this.chart_instance.config.data = _extends([], this.chart_instance.config.data, data);

this.chart_instance.update();

It doesn't seem to update the other options though, but it is animating between data point values.

[gor181]

Hey @mekwall ,

Thanks for reporting in. Seems your approach is fine, just we need to think and make sure all the options/datasets/configs are being updated.

I can take a look at this by end of this week, it's kinda hectic..

thanks,
Goran

[mekwall]

No rush @gor181. Here's a revised version that I currently use:

const {data, options} = this.props;

if (!this.chart_instance) return;

if (options) {
    this.chart_instance.options = Chart.helpers.configMerge(this.chart_instance.options, options);
}

var currentData = this.chart_instance.config.data.datasets;
var nextData = data.datasets;

nextData.forEach(function (dataset, sid) {
    if (currentData[sid] && currentData[sid].data) {
        currentData[sid].data.splice(nextData[sid].data.length);
        dataset.data.forEach(function (point, pid) {
            currentData[sid].data[pid] = nextData[sid].data[pid];
        });
    } else {
        currentData[sid] = nextData[sid];
    }
});
delete data.datasets;

this.chart_instance.config.data = {
    ...this.chart_instance.config.data,
    ...data
};

this.chart_instance.update();

[varatep]

@mekwall Are you currently extending the class and overriding the updateChart() prop?

[darkone23]

Just chiming in that I am also seeing this behavior.

👍

[mekwall]

@varatep I've made a copy of Chart.js and modified that. We use it directly in the project and do not rely on this package as a dependency.

[jerairrest]

I've added @mekwall change to a fork here: https://github.com/jerairrest/react-chartjs-2. I've tested the change with around 1000 data points and it looks like its working great!

[Codelica]

I gave the @jerairrest fork with @mekwall change a try here and it's working well for me also. 👍

[jebarjonet]

What about a PR on this repo ? So that it could be profitable for everybody

[jerairrest]

@Codelica Absolutely! See #65

[jebarjonet]

@jerairrest very nice ! Don't know if the yarn file is necessary in this PR but that can not hurt 😄

[jerairrest]

I can remove it if need be. @gor181 your thoughts?

[mekwall]

Awesome! Yarns lock file should always be added to the repo, but it needs to be kept up to date when updating packages. [See recent blog post on the subject](https://yarnpkg.com/blog/2016/11/24/lockfiles-for-all).

…

On Fri, Dec 2, 2016, 18:33 Jeremy Ayerst ***@***.***> wrote: I can remove it if need be. @gor181 <https://github.com/gor181> your thoughts? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#35 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AACQ4yYiPGNxmDVcBRr5uFXORGmuW8m-ks5rEFZagaJpZM4KKRr3> .

[jebarjonet]

Note that yarn is still in version 0.x and has bugs and failures with some packages (not the case in the very repo apparently)

[jerairrest]

Welp, I'm leaving it up to @gor181 at this point. :) To yarn or not to yarn. That is the question!

[gor181]

heya @jerairrest ,

Can we make yarn compatibility with another PR?
Asap you remove it we can merge the changes.

It would be also awesome to have an example added to examples if you have the code still available.

Big thanks to your and everyone for making the effort.

Cheers,
Goran

[jerairrest]

built and pending merge. I'll add an example in a seperate pr.

[gor181]

Thanks @jerairrest and everyone, this is out in v1.5.5

[gor181]

@jerairrest also added an example
Live at http://gor181.github.io/react-chartjs-2/ (last)

[kvz]

Hi! I'm rather new to React, Charts.js, and react-chartjs-2, so I hope I'm asking at the right place, but I'm still seeing the behavior as reported in this ticket (I think). Here's a gif:

The graph builds up from the bottom to the top at every datapoint added. I based the graph mostly on this example: https://github.com/jerairrest/react-chartjs-2/blob/master/example/src/components/randomizedLine.js

Who has a clue what I might be doing wrong?

I'm updating state via:

      let newState = _.clone(this.state)
      newState.labels.push(timestamp)
      newState.datasets[0].data.push(lastVal)
      this.setState(newState)

and calling the component like:

      <Line
        data={this.state}
        width={320}
        height={180}
        options={{
          animate   : false,
          responsive: false,
        }}
        redraw
      />

[jerairrest]

hmmm... can you reproduce this with sample data in a code pen? It looks like you're losing the last data point of your graph in the gif. Thankks!

[kvz]

Oh I'm not losing the last datapoint, that's just when the gif loops back to the start :) what I tried to showcase if that for every datapoint added, there is an animation where all data points fade in from the bottom towards the top. This makes streaming data points in a bit jumpy, especially when there are multiple graphs on-screen. Ideally for my usecase, there only is an animation to "make room" for the newly added datapoint horizontally over the x-axis, but vertically, all data points remain on the same y-axis. Sorry the gif was a bit confusing :) Sent from mobile, pardon the brevity.

…

On 5 Aug 2017, at 15:48, Jeremy Ayerst ***@***.***> wrote: hmmm... can you reproduce this with sample data in a code pen? It looks like you're losing the last data point of your graph in the gif. Thankks! — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[minusplusminus]

Had the same problem. Solved it with this Stack overflow post: https://stackoverflow.com/questions/21389341/disable-animation-with-charts-js

<Line data={data} options={{ animation: { duration: 0 }}}/>

[anvaymishra1]

Hi! I'm rather new to React, Charts.js, and react-chartjs-2, so I hope I'm asking at the right place, but I'm still seeing the behavior as reported in this ticket (I think). Here's a gif:

The graph builds up from the bottom to the top at every datapoint added. I based the graph mostly on this example: https://github.com/jerairrest/react-chartjs-2/blob/master/example/src/components/randomizedLine.js

Who has a clue what I might be doing wrong?

I'm updating state via:

      let newState = _.clone(this.state)
      newState.labels.push(timestamp)
      newState.datasets[0].data.push(lastVal)
      this.setState(newState)

and calling the component like:

      <Line
        data={this.state}
        width={320}
        height={180}
        options={{
          animate   : false,
          responsive: false,
        }}
        redraw
      />

I am stuck in a similar situation. I tried setting the animation to duration to 0 but still can't change the behaviour

[bogdanionitabp]

You can use the "mode" parameter for the chart.update() method, as documented here - this will skip animation https://www.chartjs.org/docs/latest/developers/api.html#updatemode