Error when trying to use RadarChart

[marksdean]

I installed per instructions.

In my code I import as follows:

import { RadarChart } from 'react-chartjs';

My dependencies in package.json (webpack) include:

"chart.js": "^1.1.1",
"react": "^0.14.8",
"react-chartjs": "^0.7.3",
"react-dom": "^0.14.8",

Does anyone have any ideas what could be wrong?

Thanks, Mark

bundle.js:2213 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of PageVisualize.warning @ bundle.js:2213createElement @ bundle.js:19484render @ bundle.js:178617_renderValidatedComponentWithoutOwnerOrContext @ bundle.js:7696_renderValidatedComponent @ bundle.js:7716ReactCompositeComponent__renderValidatedComponent @ bundle.js:1447mountComponent @ bundle.js:7329ReactCompositeComponent_mountComponent @ bundle.js:1447mountComponent @ bundle.js:5639mountComponent @ bundle.js:7334ReactCompositeComponent_mountComponent @ bundle.js:1447mountComponent @ bundle.js:5639_mountChildByNameAtIndex @ bundle.js:14442_updateChildren @ bundle.js:14346updateChildren @ bundle.js:14294_updateDOMChildren @ bundle.js:11664updateComponent @ bundle.js:11493receiveComponent @ bundle.js:11438receiveComponent @ bundle.js:5689updateChildren @ bundle.js:14554_reconcilerUpdateChildren @ bundle.js:14184_updateChildren @ bundle.js:14319updateChildren @ bundle.js:14294_updateDOMChildren @ bundle.js:11664updateComponent @ bundle.js:11493receiveComponent @ bundle.js:11438receiveComponent @ bundle.js:5689updateChildren @ bundle.js:14554_reconcilerUpdateChildren @ bundle.js:14184_updateChildren @ bundle.js:14319updateChildren @ bundle.js:14294_updateDOMChildren @ bundle.js:11664updateComponent @ bundle.js:11493receiveComponent @ bundle.js:11438receiveComponent @ bundle.js:5689_updateRenderedComponent @ bundle.js:7671_performComponentUpdate @ bundle.js:7653updateComponent @ bundle.js:7582ReactCompositeComponent_updateComponent @ bundle.js:1447receiveComponent @ bundle.js:7514receiveComponent @ bundle.js:5689_updateRenderedComponent @ bundle.js:7671_performComponentUpdate @ bundle.js:7653updateComponent @ bundle.js:7582ReactCompositeComponent_updateComponent @ bundle.js:1447receiveComponent @ bundle.js:7514receiveComponent @ bundle.js:5689updateChildren @ bundle.js:14554_reconcilerUpdateChildren @ bundle.js:14184_updateChildren @ bundle.js:14319updateChildren @ bundle.js:14294_updateDOMChildren @ bundle.js:11664updateComponent @ bundle.js:11493receiveComponent @ bundle.js:11438receiveComponent @ bundle.js:5689_updateRenderedComponent @ bundle.js:7671_performComponentUpdate @ bundle.js:7653updateComponent @ bundle.js:7582ReactCompositeComponent_updateComponent @ bundle.js:1447receiveComponent @ bundle.js:7514receiveComponent @ bundle.js:5689_updateRenderedComponent @ bundle.js:7671_performComponentUpdate @ bundle.js:7653updateComponent @ bundle.js:7582ReactCompositeComponent_updateComponent @ bundle.js:1447receiveComponent @ bundle.js:7514receiveComponent @ bundle.js:5689_updateRenderedComponent @ bundle.js:7671_performComponentUpdate @ bundle.js:7653updateComponent @ bundle.js:7582ReactCompositeComponent_updateComponent @ bundle.js:1447performUpdateIfNecessary @ bundle.js:7530performUpdateIfNecessary @ bundle.js:5704runBatchedUpdates @ bundle.js:6286perform @ bundle.js:6746perform @ bundle.js:6746perform @ bundle.js:6243flushBatchedUpdates @ bundle.js:6304ReactUpdates_flushBatchedUpdates @ bundle.js:1447closeAll @ bundle.js:6812perform @ bundle.js:6759batchedUpdates @ bundle.js:10783batchedUpdates @ bundle.js:6251dispatchEvent @ bundle.js:14911 bundle.js:1129 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of PageVisualize.

[marksdean]

I figured that out. Should have been 'Radar' (not RadarChart). However the chart is rendered in gray, even though I am using sample data from examples.

datasets: [ { label: "My First dataset", backgroundColor: "rgba(179,181,198,0.2)", borderColor: "rgba(179,181,198,1)", pointBackgroundColor: "rgba(179,181,198,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(179,181,198,1)", data: [65, 59, 90, 81, 56, 55, 40] }, { label: "My Second dataset", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", pointBackgroundColor: "rgba(255,99,132,1)", pointBorderColor: "#fff", pointHoverBackgroundColor: "#fff", pointHoverBorderColor: "rgba(255,99,132,1)", data: [28, 48, 40, 19, 96, 27, 100] } ]

[ledsun]

Chart.js v1.1.1 has not a backgroundColor option and has a fillColor option. Please refer documents of chart.js v1.1.1.

[marksdean]

Thank you!

On Jul 20, 2016, at 7:28 PM, shigeru.nakajima notifications@github.com wrote:

Chart.js v1.1.1 has not a backgroundColor option and has a fillColor option. Please refer documents of chart.js v1.1.1 https://github.com/chartjs/Chart.js/blob/v1.1.1/docs/03-Radar-Chart.md.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/reactjs/react-chartjs/issues/136#issuecomment-234139717, or mute the thread https://github.com/notifications/unsubscribe-auth/ABjyzegwuOw3OfouyS8aHVd6WjRPAr92ks5qXtk2gaJpZM4JRLlm.