phantom phantom - 1 year ago 271
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" />

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 Source

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

import { LineChart, Line } from 'recharts';


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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download