Open In App
Related Articles

Create a Radial Bar Chart using Recharts in ReactJS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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 = () => {
 
    // Sample data
    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 = () => {
 
    // Sample data
    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



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads