Tahrim BilalIf you're working with ReactJS and want to bring data to life with charts, Recharts offers a great way to create stunning visualizations with ease. In this guide, we’ll use Recharts and Fakestore API to fetch and display product data in a bar chart and a pie chart.
You can also check github repository and live demo. Lets get started!
🛠️ Setup: Starting with Vite
First, let’s create a new React app using Vite.
- Install Vite with the following command:
npm create vite@latest
-
Follow the prompts:
-
Project name:
charts -
Framework:
React -
Variant:
JavaScript
-
Project name:
Move to your project folder, install dependencies, and start the server:
cd charts
npm install
npm run dev
With your project running, let's create two components: one for a Product Price Bar Chart and another for a Product Categories Pie Chart.
📊 Step 1: Creating the Product Price Bar Chart (ProductChart.jsx)
In this component, we’ll fetch product data from the API and visualize it with a bar chart.
Code
Create a file in src/components/ProductChart.jsx with the following code:
// src/components/ProductChart.jsx
import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
export default function ProductChart() {
const [products, setProducts] = useState([]);
const fetchData = async () => {
try {
const response = await axios.get('https://fakestoreapi.com/products');
setProducts(response.data);
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetchData();
}, []);
// Prepare data for chart
const chartData = products.map(item => ({
name: item.id,
price: item.price,
}));
return (
<>
<div className='product'>
<h3 className='product-heading'>PRODUCT PRICE BAR CHART</h3>
<ResponsiveContainer width='95%' height={450}>
<BarChart
data={chartData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 20,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" label={{ value: "Product ID", position: "bottom", offset: -5 }} />
<YAxis label={{ value: "Price", angle: -90, position: "insideLeft", offset: -10 }} />
<Tooltip />
<Bar dataKey="price" fill="#eca1ac" />
</BarChart>
</ResponsiveContainer>
</div>
</>
);
}
Explanation
-
ResponsiveContainer: Makes the chart responsive by setting its width to 95% and height to 450px. -
BarChart: The main component that renders the bar chart. -
CartesianGrid: Adds a background grid for readability. -
XAxis&YAxis: Set up the labels for product ID and price. -
Tooltip: Shows data when hovering over the bars. -
Bar: Renders the bars, with each bar representing a product price.
🥧 Step 2: Creating the Product Categories Pie Chart (CategoryChart.jsx)
In this component, we’ll fetch product data, count the products in each category, and visualize them using a pie chart.
Code
Create a file in src/components/CategoryChart.jsx with the following code:
// src/components/CategoryChart.jsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { PieChart, Pie, Tooltip, Cell, ResponsiveContainer, Legend } from 'recharts';
export default function CategoryChart() {
const [chartData, setChartData] = useState([]);
const fetchData = async () => {
try {
const response = await axios.get('https://fakestoreapi.com/products');
categoryCount(response.data);
} catch (err) {
console.log(err);
}
};
const categoryCount = (products) => {
const count = {};
products.forEach((product) => {
if (count[product.category]) {
count[product.category]++;
} else {
count[product.category] = 1;
}
});
const chartData = Object.keys(count).map((category) => ({
name: category,
value: count[category],
}));
setChartData(chartData);
};
useEffect(() => {
fetchData();
}, []);
const COLORS = ['#f9cdd4', '#eca1ac', '#e27589', '#b25b6e', '#7c3042'];
return (
<div>
<h3 className='product-heading'>PRODUCT CATEGORIES PIE CHART</h3>
<ResponsiveContainer width='80%' height={450}>
<PieChart>
<Pie
data={chartData}
cx="45%"
cy="50%"
outerRadius={200}
fill="#8884d8"
dataKey="value"
>
{chartData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
<Legend layout="vertical" align="right" verticalAlign="middle"/>
</PieChart>
</ResponsiveContainer>
</div>
);
}
Explanation
-
categoryCountMethod: Counts the number of products in each category and formats the result for display in the pie chart. -
PieChart&Pie: The main components that render the pie chart. -
Cell: Adds color to each pie slice, defined by theCOLORSarray. -
cx,cy, andouterRadius: Position and size the pie chart within the container.
🖥️ Step 3: Rendering Components in App.js
To see your charts in action, you need to render these components in App.js.
Code
Update src/App.js as follows:
// src/App.js
import React from 'react'
import ProductChart from './components/ProductChart'
import './app.css'
import CategoryChart from './components/CategoryChart'
export default function App() {
return (
<div className='app'>
<ProductChart/>
<CategoryChart/>
</div>
)
}
With this in place, you should see both the bar chart and pie chart on your screen!
🎉 Conclusion
Congratulations! You've successfully used Recharts to create dynamic and responsive data visualizations in a React app. We’ve covered:
- Setting up a React project with Vite
- Fetching and processing data from Fakestore API
- Creating bar and pie charts using Recharts
Recharts makes building interactive visualizations simple and customizable. Experiment with other chart types and data sources to create even more engaging visualizations!
