Sometimes, we need to display an overview chart in the dashboard section. For this purpose, we can utilize the Recharts website to create visually appealing charts using React.
Let's Start... 😊
First, create your react project. Then go to the recharts website (https://recharts.org/en-US/guide).
Install Recharts:
npm install recharts
Then create a file where you write your code. I've made a file/component named 'Chart.jsx'. Now, add packages and write the code as provided.
Chart Component:
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
const Chart = () => {
const marks = [
{
"ID": 1,
"Name": "Alice",
"Math": 85,
"Physics": 90,
"Chemistry": 88
},
{
"ID": 2,
"Name": "Bob",
"Math": 78,
"Physics": 82,
"Chemistry": 79
},
{
"ID": 3,
"Name": "Charlie",
"Math": 92,
"Physics": 88,
"Chemistry": 95
},
{
"ID": 4,
"Name": "David",
"Math": 76,
"Physics": 85,
"Chemistry": 80
}
]
return (
<div>
<LineChart width={500} height={200} data={marks}>
{/* Math, Physics, Name are text. */}
<Line dataKey="Physics"></Line>
<Line dataKey="Math" stroke="#8884d8"></Line>
<XAxis dataKey="Name"></XAxis>
<YAxis></YAxis>
<Tooltip></Tooltip>
</LineChart>
</div>
);
};
export default Chart;
App Component:
Add the component in the 'App.jsx' file.
import './App.css'
import Chart from './Chart'
function App() {
return (
<>
<Chart></Chart>
</>
)
}
export default App
Output (Line Chart)
After running the code, the output displays a line chart.
Thanks for reading 🩵🥰
Top comments (0)