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

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, } ] };

Do you know if i can reuse this component? my app doesn't work when I add <MyChart/> to a container
You should be a able to reuse this component as long as you provide the correct data and options
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?
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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related