Re-rendering plot when any state of the component changes

This behaviour was not observed with older version of chartjs. i.e version less than 3.
When ever the state of the component changes , entire plot re renders again as if it is rendering for the first time. sample code to this behaviour is here

Yeah, thanks. i will work with it issue.

@vaasu070

@vaasu070 I have released a test package that solves this problem. Could I ask to try it out. And if everything is OK, I will release a minor version with an edit.

@YakovlevCoded

@YakovlevCoded yeah now It is working as expected. Thanks for looking into it.

@YakovlevCoded

@YakovlevCoded , I observed one more issue with test-react-chartjs-2 package, whenever data is updated, the chart fails to show the new data. It is always showing the initial data. This can be observed here . Hope this will be addressed soon. Thanks

@vaasu070

@vaasu070 Thank you! I will work on it.

@YakovlevCoded

@YakovlevCoded A new version 3.0.3 is rolled out, But the above bug still exists in it here. If its not too early to ask, when it will be fixed and released? Its quite critical for out project Thanks.

@vaasu070

@vaasu070 If it's critical I'll try to finish it in the next couple of days. I'll let you know as soon as I'm done with this.

@vaasu070

@vaasu070 If it's critical I'll try to finish it in the next couple of days. I'll let you know as soon as I'm done with this.

Would really appreciate this!

The re-rendering still seems to be an issue on current version 3.0.3. This was not an issue in chart.js v2.9.4

When the state changes the doughnut is redrawn/reanimated. Desired behavior is to rotate the doughnut without redrawing the graph.

export default function KChart() {
  const [rotation, setRotation] = useState(0);
  const onClick = () => {
    setRotation(rotation + 20);
  };
  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [
      {
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        borderColor: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        borderWidth: 1,
      },
    ],
  };
  return <Doughnut type="doughnut" data={data} options={{ rotation, onClick }} />;
}

The above happens on all chart types whether or not the state is passed to the component or not. (in other words, taking rotation out of the options objects still results in the same re-rendering behavior)

I'm using the following patch as a band-aid until the issue is fixed properly. This probably does not cover all use-cases (it definitely doesn't handle datasets being removed from the chart), but it works for me with a simple bar chart that is refreshed every second:

diff --git a/node_modules/react-chartjs-2/dist/index.modern.js b/node_modules/react-chartjs-2/dist/index.modern.js
index f39264d..f8636d6 100644
--- a/node_modules/react-chartjs-2/dist/index.modern.js
+++ b/node_modules/react-chartjs-2/dist/index.modern.js
@@ -117,11 +117,14 @@ var ChartComponent = forwardRef(function (props, ref) {
     var _chart$config$data$da = chart.config.data.datasets,
         currentDataSets = _chart$config$data$da === void 0 ? [] : _chart$config$data$da;
     assign(chart.config.data, newChartData);
-    chart.config.data.datasets = newDataSets.map(function (newDataSet) {
+    newDataSets.forEach(function (newDataSet) {
       var currentDataSet = find(currentDataSets, function (d) {
         return d.label === newDataSet.label && d.type === newDataSet.type;
       });
-      if (!currentDataSet || !newDataSet.data) return newDataSet;
+      if (!currentDataSet) {
+        currentDataSet = {};
+        currentDataSets.push(currentDataSet);
+      }

       if (!currentDataSet.data) {
         currentDataSet.data = [];
@@ -130,7 +133,7 @@ var ChartComponent = forwardRef(function (props, ref) {
       }

       assign(currentDataSet.data, newDataSet.data);
-      return _extends({}, currentDataSet, newDataSet, {
+      assign(currentDataSet, newDataSet, {
         data: currentDataSet.data
       });
     });

@YakovlevCoded

Hi @YakovlevCoded, thanks for all your hard work so far. Is this fix getting close to being released? Critical for our project.

I'm having same issue. Can I ask about release time ?

@YakovlevCoded

Hi @YakovlevCoded any update on this?

Hey, is there any update on this issue? Its quite a major problem for us and I'm wondering whether we'll have to switch to using chart.js directly before we go live. Thanks

@M4sterShake Same here.

@PCPbiscuit

@PCPbiscuit @M4sterShake
me too

@PCPbiscuit

@PCPbiscuit @mssrmaps I've just tried upgrading to 3.0.5 and it fixed the issue for me. If you guys aren't on this version give it a go. Hope it works!

@YakovlevCoded

Just to help clarify things for anyone reading this thread, it looks like this issue is fixed in 3.0.5. @YakovlevCoded it can probably be closed unless anyone has an issue after upgrading to 3.0.5.

react-chartjs-2@v3.2.0 was released with rerendering improvements. So I'm closing this issue, but feel free to open new ones if any problems appear.

For me the bug is still alive :( same as previous post says

@Elius94

@Elius94 Hi. Please open new issue with repoduction.

Have exact same issue - re-rendering of donut chart when any app state changed. It looks very ugly and distracting.
"react-chartjs-2": "^5.0.1",

@larinius

@larinius Hi. Please provide issue reproduction. You can fok codesandbox from examples.

@larinius

@larinius - this might be a little late - but I just spent a week wracking my brain over performance issues rendering pages with multiple charts with very large datasets constantly re-rendering every time the parent stat changed - slowing down my entire page.... React memo solved my issue - basically made my child components with the chartjs components no re render every time the parent does, only when its down state or props change

@larinius

@larinius - React memo solved my issue - basically made my child components with the chartjs components no re render every time the parent does, only when its down state or props change

Can you post sample code with useMemo and react-chartjs-2 chart improvements?

@wayneschuller

@wayneschuller Thanks to @awhite9's suggestion, I fixed the re-rendering issue in react-chartjs-2 v5.3.0 and Chart.js v4.4.9 using useMemo. Here's a code sample; hope it helps others.

// React component
const data = prepareYourDataHere(props.rawData)

// use useMemo to 'cache'  the chart data
const dataMemo = useMemo(() => {
        return data
    }, [props.rawData]) 

    return (
        <div
            style={{
                width: '100%',
            }}
        >
            <Bar
                data={dataMemo}
                options={options}
                plugins={[]}
            />
        </div>
    )

Navigation Menu

Repository navigation

Re-rendering plot when any state of the component changes #648

29 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Re-rendering plot when any state of the component changes #648

Description

Activity

YakovlevCoded commented on Apr 22, 2021

YakovlevCoded commented on Apr 22, 2021

vaasu070 commented on Apr 23, 2021

vaasu070 commented on Apr 24, 2021

YakovlevCoded commented on Apr 24, 2021

vaasu070 commented on Apr 29, 2021

YakovlevCoded commented on Apr 29, 2021

vaasu070 commented on Apr 30, 2021

revroad-dev commented on May 6, 2021

revroad-dev commented on May 6, 2021

ntamas commented on May 7, 2021

revroad-dev commented on May 13, 2021

maidinhkhoa92 commented on May 19, 2021

vaasu070 commented on May 19, 2021

29 remaining items

MaxboDev commented on Sep 27, 2021

PCPbiscuit commented on Sep 27, 2021

mssrmaps commented on Sep 27, 2021

MaxboDev commented on Sep 27, 2021

MaxboDev commented on Oct 2, 2021

dangreen commented on Oct 21, 2021

Elius94 commented on May 2, 2022

dangreen commented on May 2, 2022

larinius commented on Dec 8, 2022

dangreen commented on Dec 8, 2022

awhite9 commented on Jun 15, 2023

wayneschuller commented on Dec 9, 2023

quyendaoqt707 commented on Jul 17, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions