reactjs - React-chartjs not working -
i'm trying use react-chartjs within project, doesn't seem work...
i'm using react-router load page (home):
import react 'react'; import { textfield, raisedbutton } 'material-ui'; import { history } 'react-router'; import chart './widgets/chart.js'; const home = react.createclass({ getinitialstate() { return { }; }, componentdidmount() { }, togglenotification() { }, render() { return ( <div> <chart/> </div> ) } }); export default home;
and chart refers file:
import react 'react'; import chart 'chart.js'; import {linechart} 'react-chartjs'; function rand(min, max, num) { var rtn = []; while (rtn.length < num) { rtn.push((math.random() * (max - min)) + min); } return rtn; } const chartwidget = react.createclass({ getinitialstate() { return { chartdata : { labels: ["january", "february", "march", "april", "may", "june", "july"], datasets: [ { label: "my first dataset", fillcolor: "rgba(220,220,220,0.2)", strokecolor: "rgba(220,220,220,1)", pointcolor: "rgba(220,220,220,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(220,220,220,1)", data: [5, 8, 2, 0, 1, 2, 0] }, { label: "my second dataset", fillcolor: "rgba(151,187,205,0.2)", strokecolor: "rgba(151,187,205,1)", pointcolor: "rgba(151,187,205,1)", pointstrokecolor: "#fff", pointhighlightfill: "#fff", pointhighlightstroke: "rgba(151,187,205,1)", data: [-2, -5, 0, -3, -1, 0, -1] } ] }}; }, componentdidmount() { }, togglenotification() { }, render() { return ( <linechart data={this.state.chartdata} redraw width="600" height="250" /> ) } }); export default chartwidget;
error i'm getting:
warning: react.createelement: type should not null, undefined, boolean, or number. should string (for dom elements) or reactclass (for composite components). check render method of
chartwidget.warning @ vendor.bundle.js:11125reactelementvalidator.createelement @ vendor.bundle.js:27927render @ app.bundle.js:29792(anonymous function) @ app.bundle.js:407reactcompositecomponentmixin._rendervalidatedcomponentwithoutownerorcontext @ vendor.bundle.js:14599reactcompositecomponentmixin._rendervalidatedcomponent @ vendor.bundle.js:14619wrapper @ vendor.bundle.js:11394reactcompositecomponentmixin.mountcomponent @ vendor.bundle.js:14232wrapper @ vendor.bundle.js:11394reactreconciler.mountcomponent @ vendor.bundle.js:12542reactmultichild.mixin.mountchildren @ vendor.bundle.js:22652reactdomcomponent.mixin._createcontentmarkup @ vendor.bundle.js:19830reactdomcomponent.mixin.mountcomponent @ vendor.bundle.js:19718reactreconciler.mountcomponent @ vendor.bundle.js:12542reactcompositecomponentmixin.mountcomponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394reactreconciler.mountcomponent @ vendor.bundle.js:12542reactmultichild.mixin.mountchildren @ vendor.bundle.js:22652reactdomcomponent.mixin._createcontentmarkup @ vendor.bundle.js:19830reactdomcomponent.mixin.mountcomponent @ vendor.bundle.js:19718reactreconciler.mountcomponent @ vendor.bundle.js:12542reactmultichild.mixin.mountchildren @ vendor.bundle.js:22652reactdomcomponent.mixin._createcontentmarkup @ vendor.bundle.js:19830reactdomcomponent.mixin.mountcomponent @ vendor.bundle.js:19718reactreconciler.mountcomponent @ vendor.bundle.js:12542reactmultichild.mixin.mountchildren @ vendor.bundle.js:22652reactdomcomponent.mixin._createcontentmarkup @ vendor.bundle.js:19830reactdomcomponent.mixin.mountcomponent @ vendor.bundle.js:19718reactreconciler.mountcomponent @ vendor.bundle.js:12542reactcompositecomponentmixin.mountcomponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394reactreconciler.mountcomponent @ vendor.bundle.js:12542reactcompositecomponentmixin.mountcomponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394reactreconciler.mountcomponent @ vendor.bundle.js:12542reactcompositecomponentmixin.mountcomponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394reactreconciler.mountcomponent @ vendor.bundle.js:12542reactcompositecomponentmixin.mountcomponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394reactreconciler.mountcomponent @ vendor.bundle.js:12542mountcomponentintonode @ vendor.bundle.js:8912mixin.perform @ vendor.bundle.js:13649batchedmountcomponentintonode @ vendor.bundle.js:8928mixin.perform @ vendor.bundle.js:13649reactdefaultbatchingstrategy.batchedupdates @ vendor.bundle.js:19229batchedupdates @ vendor.bundle.js:13154reactmount._rendernewrootcomponent @ vendor.bundle.js:9122wrapper @ vendor.bundle.js:11394reactmount._rendersubtreeintocontainer @ vendor.bundle.js:9196reactmount.render @ vendor.bundle.js:9216wrapper @ vendor.bundle.js:11394(anonymous function) @ app.bundle.js:280(anonymous function) @ app.bundle.js:285(anonymous function) @ app.bundle.js:286__webpack_require__ @ vendor.bundle.js:1051fn @ vendor.bundle.js:596(anonymous function) @ app.bundle.js:7__webpack_require__ @ vendor.bundle.js:1051webpackjsonpcallback @ vendor.bundle.js:22(anonymous function) @ app.bundle.js:1 vendor.bundle.js:9781 uncaught invariant violation: element type invalid: expected string (for built-in components) or class/function (for composite components) got: undefined. check render method of
chartwidget.
can tell me did wrong?
using:
webpack
hotloaders
react.js
react-router
react-chartjs material-ui
try import linechart way instead:
const linechart = require('react-chartjs').line;
and remove:
import {linechart} 'react-chartjs';
Comments
Post a Comment