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)