phantom phantom - 3 months ago 33
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.


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