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

Answer 1

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