React-chartjs-2: LineChart only updates upon resizing the window

[iremlopsum]

Hi guys,

I'm doing a small demo project with this library, but I ran into some issues. I update the dataset every x amount of seconds, but the changes in dataset only get applied if I resize the window.

Here's a gist of my component: https://gist.github.com/iremlopsum/98de215354e8e01ea12d4b0c8bb6b632

the result that I'm seeing is:

plus I'm getting a weird error:

Uncaught TypeError: Cannot read property 'skip' of undefined
    at parseVisibleItems (core.interaction.js:40)
    at getIntersectItems (core.interaction.js:56)
    at indexMode (core.interaction.js:106)
    at Chart.getElementsAtEventForMode (core.controller.js:595)
    at Chart.handleEvent (core.controller.js:808)
    at Chart.eventHandler (core.controller.js:766)
    at listener (core.controller.js:701)

which only happens sometimes when I hover on the graph.

Any ideas?

[jtjames]

I'm seeing the same issue with my bar chart

[gulrotkake]

I experienced the same problem when mutating the contents within state, depending on what you want to accomplish, I solved this in one of two ways.

The first, and nicest, was to make a copy of labels and temps, ie:

this.setState(prevState => {
    let temps = prevState.temps.slice();
    let labels = prevState.labels.slice()

    // Mutate the copy temps / labels ...

    return {temps, labels};
});

but the resulting animation was not what I wanted, as it seems chart.js behaves differently when the underlying reference to data is changed versus mutated.

The second, which forces chart.js to update wrt. its mutated state, was an ugly hack which breaks with the react model:

Grab a copy of the chart component via the ref attribute:

<Line ref={child => {this._child = child;}} data={data}/>

and when you update your data, force an update by calling it directly on chart.js:

if (this._child) this._child.chartInstance.update();