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

I'm trying to get my chart to update dynamically as new data comes in (from socket.io) so I have a method onChange(data) that is used as the callback function of setState called when the new data comes in.

The Chart however does not update itself... unless I refresh/resize the browser. If I set redraw={true}, then the chart updates but it seems to refresh the whole page (?) and kills the performance for the rest of the page...

Any idea what I'm doing wrong here?

import React from 'react'
import ReactDOM from 'react-dom'

import {Line} from 'react-chartjs-2'

module.exports =  class MyChart extends React.Component {

  constructor(props)
  {
      super(props)
      this.buffersize

      this.data = {
        labels: [],
        datasets: [
          {/
            label: 'My Chart',
            data: []
          }
        ]
      }

  }

  onChange(newdata) {

    const size = this.data.datasets[0].data.length
    if (size >= this.buffersize)
    {
      this.data.datasets[0].data.shift()
      this.data.labels.shift()
    }

    this.data.labels.push(newdata.label)
    this.data.datasets[0].data.push(newdata.value)

  }

  render()
  {
    return (
      <Line data={this.data}/>
    )
  }

}

I'm trying to use the { defaults } provided by your wrapper but when I pass these into a I get all kinds of errors. (I am not yet modifying these defaults)

My Code

import { Bar, defaults } from 'react-chartjs-2';

// component level
<Bar redraw data={this.props.chartData} height={300} options={defaults} />

Error in console

core.controller.js:443 Uncaught TypeError: Cannot set property '_data' of undefined
    at Chart.Controller.update (core.controller.js:443)
    at Chart.Controller.resize (core.controller.js:306)
    at eval (core.controller.js:224)
    at eval (core.helpers.js:982)
update @ core.controller.js:443
resize @ core.controller.js:306
(anonymous) @ core.controller.js:224
(anonymous) @ core.helpers.js:982
scale.radialLinear.js:113 Uncaught (in promise) TypeError: Cannot read property 'callback' of undefined
    at ChartElement.convertTicksToLabels (scale.radialLinear.js:113)
    at ChartElement.update (core.scale.js:94)
    at getMinimumBoxSize (core.layoutService.js:144)
    at Object.helpers.each (core.helpers.js:23)
    at Object.update (core.layoutService.js:155)
    at Chart.Controller.updateLayout (core.controller.js:381)
    at Chart.Controller.initialize (core.controller.js:250)
    at new Chart.Controller (core.controller.js:231)
    at new Chart (core.js:7)
    at ChartComponent.renderChart (index.js:212)

Version Chartjs: v2.4.0

Is it possible to integrate a plugin into react-chartjs? For example https://github.com/xch89820/Chart.Funnel.js

I tried using

Chart.pluginService.register({
		// something
	});

with no success.

Using the DoughnutChart example

doughnutChart.js

import React from 'react'
import { Doughnut } from 'react-chartjs-2'

const data = {
  labels: [
    'Red',
    'Green',
    'Yellow',
  ],
  datasets: [{
    data: [
      300,
      50,
      100,
    ],
    backgroundColor: [
      '#FF6384',
      '#36A2EB',
      '#FFCE56',
    ],
    hoverBackgroundColor: [
      '#FF6384',
      '#36A2EB',
      '#FFCE56',
    ],
  }],
}

const DoughnutChart = props => (
  <div className="chart-wrapper">
    <Doughnut
      data={data}
    />
  </div>
)

export default DoughnutChart

doughnutChart.spec.js

import React from 'react'

import DoughnutChart from './doughnutChart'

it('Renders a DoughnutChart', () => {
  const wrapper = mount(
    <DoughnutChart />,
  )
  expect(wrapper).toMatchSnapshot()
})

Error

Failed to create chart: can't acquire context from the given item
      
      at CustomConsole.Object.<anonymous>.console.error (tools/jestSetup.js:37:9)
      at Chart.construct (node_modules/chart.js/src/core/core.controller.js:116:13)
      at new Chart (node_modules/chart.js/src/core/core.js:7:8)
      at ChartComponent.renderChart (node_modules/react-chartjs-2/lib/index.js:259:29)
      at ChartComponent.componentDidMount (node_modules/react-chartjs-2/lib/index.js:81:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:264:25
      at measureLifeCyclePerf (node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)
      at node_modules/react-dom/lib/ReactCompositeComponent.js:263:11
      at CallbackQueue.notifyAll (node_modules/react-dom/lib/CallbackQueue.js:76:22)
      at ReactReconcileTransaction.close (node_modules/react-dom/lib/ReactReconcileTransaction.js:80:26)
      at ReactReconcileTransaction.closeAll (node_modules/react-dom/lib/Transaction.js:209:25)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:156:16)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:143:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:319:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:91:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (src/elements/doughnutChart/doughnutChart.spec.js:6:17)
          at Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
          at <anonymous>

When updating the data of the chart instance, you replace all of it which makes chart.js re-render the chart even though you've only updated the data points. This makes it impossible to animate between changed values.

It would be great if when we only update data points that it would update them them properly so that seamless animation between point values work as intended.

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

Getting this error after upgrading to new version.

Reproduction

hmm

chart.js version

3.7.1

react-chartjs-2 version

4.1.0

Possible solution

No response

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.

Hi and greattings, i maked a project in cube.js and afther that a "dashboard-app" of type 'real time dashboard' everything is ok until I run the app and response whit that message:

TypeError: _chart.default is undefined

and i could't advanced afther that.

so i goes to the file node_modules/react-chartjs-2/es/index.js:644 and I make a log of the variable '_chart' and I see that only exist the field "_chart["default"]"

so i fix the error whit this:

// I change this:
// var defaults = _chart["default"].defaults;
// For this:
var defaults = _chart["defaults"];

I hope someone can fix this or use that issue for help

Whenever there is a resize of the canvas element, such as if the user resizes their browser window, and there is a custom size specified on the chart, the chart grows in vertical height. Chart.js itself does not seem to have this issue.

To see an example, try the samples page, http://jerairrest.github.io/react-chartjs-2/, and watch the "Bar Example (custom size)" sample. Each time you resize the browser window, the chart will grow in vertical height.

In my own project, the chart will go into an infinite loop and grow until the browser runs out of memory, though this doesn't happen on the sample page. I suppose the chartjs-size-monitor is the culprit since I don't see my component rerendering.

I've included the latest versions 2.0.5 in my project and in IE the charts are failing to render. Chrome and FF are fine. On your demo page the charts also don't render in IE. I have looked through the issues which start this is fixed but this doesn't seem to be the case. I have downloaded the latest code and run it and in IE I get the .assign issue. Downloading the zipped code and trying to run the npm install fails as well.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | jsdom | ^20.0.2 -> ^21.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

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

I am trying to use React ChartJs-2 in React Parcel but every time I get the error: @parcel/core: Failed to resolve 'react-chartjs-2' from './src/App.js'

Reproduction

https://react-chartjs-2.js.org/

chart.js version

v4.1.1

react-chartjs-2 version

v5.1.0

Possible solution

No response

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @types/react-dom (source) | 18.0.9 -> 18.0.10 | | | | |

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @vitest/coverage-c8 | ^0.25.2 -> ^0.26.0 | | | | | | vitest | ^0.25.2 -> ^0.26.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-config-standard-react | ^12.0.0 -> ^13.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | docusaurus-plugin-react-docgen-typescript | ^0.1.0 -> ^1.0.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.