javascript - Chart.js with React - Stack Overflow

admin管理员组

文章数量:1326304

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 ponents, 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

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 ponents, 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

• javascript
• reactjs
• charts
• chart.js
• react-chartjs

Share Improve this question Follow edited Nov 21, 2017 at 6:46 Shubham Khatri 282k5858 gold badges431431 silver badges411411 bronze badges asked Apr 6, 2017 at 4:42 ElenaElena 64933 gold badges99 silver badges1919 bronze badges 2

• r u using ReCharts ?? from where u r importing LineChart ? – Mayank Shukla Commented Apr 6, 2017 at 4:48
• Refer to this. It may help. github./reactjs/react-chartjs/issues/112 – AryanJ-NYC Commented Apr 6, 2017 at 4:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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,
        }
    ]
};

本文标签： javascriptChartjs with ReactStack Overflow