React Js
Recharts in React js
Over the past few years, our team were satisfied with React and Redux in some projects, which are almost web applications involved to data presentation or operation. The projects need use a lot of charts which is so painful that we decided to create new chart library for React...
Recharts : Documentation
Recharts : npm installation
Recharts Components
If you want to create , any kind of charts for your react project you need to import or use some components, they are /
- ResponsiveContainer
- LineChart
- Line
- XAxis
- YAxis
ResponsiveContainer
LineChart
line chart carries data of the chart, there in that chart you can use API or any Data ..
Line
line always carries the datakey="",
line chart carries data of the chart, there in that chart you can use API or any Data ..
Line
line always carries the datakey="",
To import Chart Components
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
ResponsiveContainer,AreaChart, Area, BarChart, Bar } from 'recharts';
If you want to create chart in react js , you need to import data from API or you have to create Data like below example
var pdata = [
{
name: 'Python',
student: 13,
fees: 10
},
{
name: 'Javascript',
student: 15,
fees: 12
},
{
name: 'PHP',
student: 5,
fees: 10
},
{
name: 'Java',
student: 10,
fees: 5
},
{
name: 'C#',
student: 9,
fees: 4
},
{
name: 'C++',
student: 10,
fees: 8
},
];
finally you have to use Chart , components which you can see below example
<ResponsiveContainer width="100%" aspect={3}>
<LineChart data={pdata} width={500} height={300}
margin={{ top: 5, right: 300, left: 20, bottom: 5 }}>
{/* <CartesianGrid strokeDasharray="3 3" /> */}
<XAxis dataKey="name" interval={'preserveStartEnd'} />
<YAxis />
<Tooltip contentStyle={{ backgroundColor: 'yellow' }} />
{/* <Legend /> */}
<Line type="monotone" dataKey="student" stroke="red" activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="fees" stroke="green" activeDot={{ r: 8 }} />
</LineChart>
</ResponsiveContainer>
