Chart.js with React

Question

I want to implement charts in my project, and I decided to use react-chart.js

I'm at the very beginning trying to add an example in my components, so I added this code :

var MyChart = React.createClass({

  render: function() {
    console.log(chartData)
    return <LineChart data={chartData} options={null} width="600" height="250"/>
  }
});

module.exports = MyChart;

chartData is an object

I have an err:

core.js:64 Uncaught TypeError: (intermediate value)[chartType] is not a function

I also tried other charts, but none of them did work, so I probably do something wrong, but I can't find what

Refer to this. It may help. github.com/reactjs/react-chartjs/issues/112 — AryanJ-NYC
– AryanJ-NYC, Commented Apr 6, 2017 at 4:58

Shubham Khatri · Accepted Answer · 2017-04-06 05:19:48Z

6

React Chartjs has a dependency on Chart.js too. Install it like

npm install --save chart.js@^1.1.1 react react-dom

Also since Line is a named export you need to import it as

import {Line as LineChart} from 'react-chartjs';

Also make sure your chartData is an object like

{
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fill: false,
            pointHoverRadius: 5,
            pointRadius: 1,
            pointHitRadius: 10,
            data: [65, 59, 80, 81, 56, 55, 40],
            spanGaps: false,
        }
    ]
};

edited Apr 6, 2017 at 5:19

answered Apr 6, 2017 at 4:57

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Elena Over a year ago

Do you know if i can reuse this component? my app doesn't work when I add <MyChart/> to a container

Shubham Khatri Over a year ago

You should be a able to reuse this component as long as you provide the correct data and options

Elena Over a year ago

I have null in options, and I can't reuse it in other components, or even place the element inside a div. What should I add to fix that?

Shubham Khatri Over a year ago

I am not sure Elena, I did not face such issues with react-chartjs. For me its works fine

Collectives™ on Stack Overflow

Chart.js with React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related