react-chartjs-2: chart not updating

@dmichel76 Don’t you need to use the redraw prop like so? (This did it for me)

<Line data={this.data} redraw />

@gor181 Thanks!

just using key={Math.random()} in my chartjs component did the trick.

hey @dmichel76 ,

Try to force a refresh by setting the key dynamically to any value. This would be a quick fix (if it works).

I’ll try to check your example during this week.

@nealoke Yes, as I said in my original post, when addingredraw={true}, the update occurs but it seems to refresh the whole page (one can see the reloading icon of the browser constancy on) rather than just the widget, affecting the performance of the whole page…

After tinkering around, it seems that react-chartjs-2 “memoizes” properties of the chart, which creates an issue where chart.js is attempting to find a metadata value while updating the chart and throws an error:

Uncaught TypeError: Cannot read property 'skip' of undefined

Removing https://github.com/gor181/react-chartjs-2/blob/master/src/index.js#L155 seems to allow dynamic chart data updates without needing to use redraw.

Ok so I just had this issue and spent a ton of time on it, until I finally realized what I was doing wrong. I hope this helps anyone on this thread and anyone who also runs into this issue!

Originally I had the chartData set up as a state variable. I realized later that the state was never getting updated so I changed it to a regular variable that gets updated whenever new data is fetched and passed to my custom Chart component. See my Chart component below:

import type { NextPage } from "next"
import React from "react"
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js"
import { Line } from "react-chartjs-2"

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
)

interface Props {
  labels: string[]
  history: number[]
}

const Chart: NextPage<Props> = ({ labels, history }) => {
  const chartData = {
    labels: labels as never,
    datasets: [
      {
        label: "Last 10 Minutes",
        backgroundColor: "#4F1894",
        borderColor: "#4F1894",
        data: history,
      },
    ],
  }

  return (
    <div className="mt-6 shadow rounded bg-white p-4 sm:p-10">
      <Line data={chartData} />
    </div>
  )
}

export default Chart

The chart gets refreshed any time new data is fetched and passed to this component! 😄

I solved it using lodash _.cloneDeep function when switching from one dataset to another.

Hello, this should do the trick https://stackoverflow.com/questions/49316914/react-chartjs-2-not-updating-graph-when-state-updates You don’t need redraw or anything else, just make sure you do a copy of the labels and datasets. It worked for me.

Same here. My charts all blinks and redraws. Is there another way to update chart?

Did this issue get any updates or further attention from the authors? I attempted the same (i.e. deep copy and randomising the key) and only randomising the key seems to work for me too. It seems to have been closed after the “chartInstance.update” comment but this is no longer relevant since the update method is no longer exposed.

I just added and redraw/> at the end of Component and the state should update as well in the local Component

I update the chartsjs instance directly. The data comes in via websocket. Inspired by: chartsjs-plugin-streaming.

componentDidMount() {
    this.socket = io(window.location.origin, { path: `${window.location.pathname}/ws`, transports: ['websocket'] });
    this.socket.on('value_update', ({ a, b }) => {
        this.chartsjs.chartInstance.data.datasets[0].data.push({ x: Date.now(), y: a });
        this.chartsjs.chartInstance.data.datasets[1].data.push({ x: Date.now(), y: b });

        this.chartsjs.chartInstance.update({
            preservation: true,
        });
    }
}

<Line
    ref={(chartsjs) => { this.chartsjs = chartsjs; }}
    // Set datasets
/>

Not sure if it’s correct way to do it performance wise.