Create a Radial Bar Chart using Recharts in ReactJS

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:

• React JS
• React Recharts

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.

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

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.

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