react-chartjs-2: TypeError: Cannot read properties of undefined

I am getting the following errors:

TypeError: Cannot read properties of undefined (reading 'visible')

where the error references the following line and function:

_getSortedDatasetMetas(filterVisible) {
     const me = this;
     const metasets = me._sortedMetasets;
     const result = [];
     let i, ilen;
     for (i = 0, ilen = metasets.length; i < ilen; ++i) {
       const meta = metasets[i];
       if (!filterVisible || meta.visible) { <---- THIS LINE
         result.push(meta);
       }
     }
     return result;
    }

TypeError: Cannot read properties of undefined (reading 'controller')

where the error references the following line:

const style = meta.controller.getStyle(usePointStyle ? 0 : undefined);

The problem is that it happens randomly and I can not find any culprit for the problem.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 1
Comments: 24

Commits related to this issue

feat: datasetIdKey prop datasetIdKey prop added to track datasets changes #735 #814 — committed to reactchartjs/react-chartjs-2 by dangreen 3 years ago

Most upvoted comments

This is happening for me on react-chartjs-2@3.3.0 with chart.js@3.6.0.

It seems that when the data prop passed into <Line> changes, this can happen and has something to do with missing metasets in Chart.js/src/core/core.controller.js:_getSortedDatasetMetas:

(note the empty ⨉ 4 marker)

I was able to mitigate by passing redraw={true}: <Line data={data} options={options} redraw />

But this means I lose out on the cool animation between old data and new data.

@dangreen This is a total guess, but could it be possible that the performance optimizations around here, something about the mutation of old datasets to produce new datasets, are what cause the metasets to be dropped on the Chart.js side? It seems like Chart.js 3.6.0 does use referential equality on datasets to perform some kind of optimization on their end.

Thanks for this amazing package, hoping this can be a helpful pointer to the bug!

chrmcg on Nov 4, 2021

I had the same problem with "chart.js": "3.6.2" and "react-chartjs-2": "4.0.0", but only in Jest tests. The app was working fine, but the tests would fail with this:


    TypeError: Cannot read property 'prototype' of undefined

      33 | import { Chart as ReactChart } from 'react-chartjs-2'
      34 |
    > 35 | ChartJS.register(
         |         ^
      36 |   ArcElement,
      37 |   LineElement,
      38 |   BarElement,

      at TypedRegistry.isForType (node_modules/chart.js/dist/chart.js:6005:74)
      at Registry._getRegistryForType (node_modules/chart.js/dist/chart.js:6148:15)
      at node_modules/chart.js/dist/chart.js:6128:41
          at Array.forEach (<anonymous>)
      at Registry._each (node_modules/chart.js/dist/chart.js:6127:15)
      at Registry.add (node_modules/chart.js/dist/chart.js:6085:10)
      at Function.register (node_modules/chart.js/dist/chart.js:7407:16)
      ...

I found out that the issue is fixed if I move the ChartJS.register() call to be in the body component, and not outside of it, i.e.

const Component = () => {
	ChartJS.register()
	...
}

instead of

ChartJS.register()

const Component = () => {
	...
}

mciszczon on Jan 18, 2022

@acceh Downgrading to version 3.0.4 helped me.

ashishk14 on Sep 21, 2021

@mciszczon Thank you for posting that, I was also coming up with that error.

ChazUK on Jul 4, 2022

FWIW, I was able to mitigate completely by fixing Chart.js at 3.5.0 yarn add chart.js@3.5.0 react-chartjs-2@3.3.0

EDIT: I spoke too soon. When testing with a different dataset, the same issue happened with chart.js@3.5.0.

chrmcg on Nov 5, 2021

Anyone with the same issue? Downgrade from 3.1.0 to 3.0.4 helped. However, versions 3.2.x and 3.3.x is still having the issue. @dangreen can you reopen the issue please?

honzahruby on Nov 3, 2021