[Bug]: Chart is flickering when update with new datapoint and using redraw={true}.

[donavan-tangible]

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Hi, the only way that I found to update the chart is to use “redraw={true}” The problem is: when the graph update with new datapoint ( each second), the complete graph is flickering. This is probably because react-chartjs-2 “destroy” the chart and rerender the graph? https://github.com/reactchartjs/react-chartjs-2/blob/38f6403cc3951c4fdf0b1c398fd1347489ea2970/src/chart.tsx#L78 Do someone here experiment this issue?

Reproduction

...

chart.js version

v5.2.0

react-chartjs-2 version

v5.2.0

Possible solution

rework on redraw={true} or make ref.update() possible;

[carldr]

I had this same problem, but solved it by re-generating my options and data options for the Chart component in a useEffect when the data passed to the component changed.

So like :

export default function MonitorGraph({ graph_data } : PropsType ) {
  const [options, setOptions] = useState({} as ChartOptions<'line'>);
  const [data, setData] = useState({} as ChartData<'line'>);

  useEffect(() => {
    setData(...);
    setOptions(...);
  }, [ graph_data ] );

  return <Line options={options} data={data} redraw={true} />
}

The flickering went away after this. Previously, I wasn't using the useEffect, and just creating data and objects objects in the component main body.