phantom phantom - 11 days ago 7
Node.js Question

import Recharts.js library to jsx react file

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

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

Comments