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

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

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -