Create a Radial Bar Chart using Recharts in ReactJS
Last Updated :
14 Dec, 2023
Rechart JS is a library that is used for creating charts for React JS. This library is used for building Line charts, Bar charts, Pie charts, etc, with the help of React and D3 (Data-Driven Documents). Â
A Radial Bar chart is a categorical bar chart that is displayed in polar coordinates. It is also known as a circular bar chart. It is used to show comparisons among categorical data by using a circular shape plot.
Prerequisite:
Approach to create Radial Bar Chart:
To craft a Radial Bar chart in React with recharts, employ the RadialBarChart component from the Recharts npm package. Generate individual bars within the chart by employing the RadialBar component.
Steps to create React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the required modules using the following command.
npm install --save recharts
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"recharts": "^2.10.1",
"web-vitals": "^2.1.4",
}
Example 1: The code utilizes the ‘recharts’ library in React to generate a Radial Bar Chart, representing data with categories (‘A’ to ‘I’) and corresponding numerical values, while customizing the chart’s appearance and layout.
Javascript
import React from 'react' ;
import { RadialBarChart, RadialBar } from 'recharts' ;
const App = () => {
const data = [
{ name: 'A' , x: 1, fill: "green" },
{ name: 'B' , x: 2, fill: "yellow" },
{ name: 'C' , x: 3, fill: "aqua" },
{ name: 'D' , x: 4, fill: "blue" },
{ name: 'E' , x: 5, fill: "orange" },
{ name: 'F' , x: 6, fill: "red" },
{ name: 'G' , x: 7, fill: "black" },
{ name: 'H' , x: 8, fill: "purple" },
{ name: 'I' , x: 9, fill: "gray" },
];
return (
<RadialBarChart width={500}
height={500} data={data}>
<RadialBar minAngle={15} dataKey= "x" />
</RadialBarChart>
);
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000
Output
Example 2: The code uses the ‘recharts’ library in React to create a Radial Bar Chart displaying data with different categories (‘A’ to ‘G’) and corresponding values, customizing the appearance and layout of the chart.
Javascript
import React from 'react' ;
import { RadialBarChart, RadialBar } from 'recharts' ;
const App = () => {
const data = [
{
name: 'A' ,
x: 31.47,
fill: '#8784d8' ,
},
{
name: 'B' ,
x: 26.69,
fill: '#84a6ed' ,
},
{
name: 'C' ,
x: 15.69,
fill: '#8ed1e1' ,
},
{
name: 'D' ,
x: 8.22,
fill: '#82da9d' ,
},
{
name: 'E' ,
x: 8.63,
fill: '#a2de6c' ,
},
{
name: 'F' ,
x: 2.63,
fill: '#d0dd57' ,
},
{
name: 'G' ,
x: 6.67,
fill: '#ffa658' ,
},
];
return (
<RadialBarChart
width={500}
height={500} data={data}
innerRadius= "20%" outerRadius= "70%" >
<RadialBar minAngle={30} dataKey= "x" clockWise />
</RadialBarChart>
);
}
export default App;
|
Output: Now open your browser and go to http://localhost:3000
Output
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...