Re-rendering plot when any state of the component changes

[vaasu070]

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

[YakovlevCoded]

Yeah, thanks. i will work with it issue.

[YakovlevCoded]

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

[vaasu070]

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

[vaasu070]

@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

[YakovlevCoded]

@vaasu070 Thank you! I will work on it.

[vaasu070]

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

[YakovlevCoded]

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

[revroad-dev]

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

[revroad-dev]

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)

[ntamas]

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

[revroad-dev]

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

[maidinhkhoa92]

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

[vaasu070]

Hi @YakovlevCoded any update on this?