将Recharts.js库导入jsx react文件

Question

I am looking to use Recharts as a graph system for my React app.

To install I have gone to the installation guide and entered the following command in the terminal

$ npm install recharts

My jsx file then looks like the code below: import React from "react"; import ReactDOM from "react-dom"; import ReCharts from "recharts";

var App = React.createClass({
  render: function() {
    var data = [{ name: 'a', value: 12 }];
    return (
     <LineChart width={400} height={400} data={data}>
      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    </LineChart>
    );
  }
});

ReactDOM.render(<App/>, document.getElementById('app'));

It is not working as I am not importing recharges correctly. Can anyone advise and explain how this should be imported and any advice on how I soul know if I am exporting another library without any explicit guidance in its documentation.

Answer 1

You need import LineChart and Line components from Recharts , because this library does not have default exports Recharts index

import { LineChart, Line } from 'recharts';

Update

also you need change dataKey , from 'uv' to 'value' because in data you use value as key for chart values

Example