Seamless animation between changed data point values doesn't work about react-chartjs-2 HOT 24 CLOSED

Just chiming in that I am also seeing this behavior.

👍

from react-chartjs-2.

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();

from react-chartjs-2.

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!

from react-chartjs-2.

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

from react-chartjs-2.

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 }}}/>

from react-chartjs-2.

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

from react-chartjs-2.

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.

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

@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.

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

@Codelica Absolutely! See #65

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

from react-chartjs-2.

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)

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

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

from react-chartjs-2.

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
      />

from react-chartjs-2.

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!

from react-chartjs-2.

from react-chartjs-2.