How to Build Radial Bar Chart Component with React Recharts

In this tutorial, we will teach you how to create a simple radial bar chart in React js using a function component, Recharts, and Bootstrap packages.

Recharts offer various other graphs and charts. A radial bar chart is one such chart that we will learn to create and use in React js environment.

A radial bar chart interprets a radial chart that uses bars instead of lines to illustrate per variable. Each bar is drawn along a spoke, with the bar’s length corresponding to the variable’s value.

Generally, a radial bar chart compares numerous variables or performance metrics for a single entity or subject.

Radial bar charts are ideal for the field of Marketing and allow deep research for various products or campaigns across multiple metrics.

Apart from that, we can also use radial bar charts in React for building sports or health management apps.

React Recharts Radial Bar Chart Example

• Step 1: Download React Framework
• Step 2: Install Required Dependencies
• Step 3: Build New Component
• Step 4: Create Radial Bar Chart Component
• Step 5: Register New Component
• Step 6: View App on Browser

Download React Framework

Make sure you have Node.js and npm (Node Package Manager) installed on your computer.

You can download and install them from the official website: https://nodejs.org/en/.

Open up your terminal or command prompt and navigate to the directory where you want to create your new React app.

Invoke the below command to produce a new React app using the create-react-app tool:

npx create-react-app my-react-app

Wait unless the installation process is utterly done. Once it’s done, navigate to the app directory by running:

cd my-react-app

Install Required Dependencies

You have to install certain packages for building the radial chart. Hence, run the given command to install the modules.

npm i recharts bootstrap

Build New Component

Next, you have to build the new directory, name it components/ in the src folder. Also, create the ReRadialBarChart.js file and add the below code to create the functional component.

import React from 'react'
function ReRadialBarChart() {
  return (
    <div></div>
  )
}
export default ReRadialBarChart

Create Radial Bar Chart Component

Now, comes the most imperative step. You have to open the components/ReRadialBarChart.js file.

Import the required packages, define data that you have to inoculate in the radial chart. Furthermore, define the tags that shows the data in radial chart.

import React from "react";
import {
  RadialBarChart,
  RadialBar,
  Legend,
  ResponsiveContainer,
} from "recharts";
function ReRadialBarChart() {
  const data = [
    {
      name: "18-24",
      uv: 31.47,
      pv: 2400,
      fill: "#8884d8",
    },
    {
      name: "25-29",
      uv: 26.69,
      pv: 4567,
      fill: "#83a6ed",
    },
    {
      name: "30-34",
      uv: 15.69,
      pv: 1398,
      fill: "#8dd1e1",
    },
    {
      name: "35-39",
      uv: 8.22,
      pv: 9800,
      fill: "#82ca9d",
    },
    {
      name: "40-49",
      uv: 8.63,
      pv: 3908,
      fill: "#a4de6c",
    },
    {
      name: "50+",
      uv: 2.63,
      pv: 4800,
      fill: "#d0ed57",
    },
    {
      name: "unknow",
      uv: 6.67,
      pv: 4800,
      fill: "#ffc658",
    },
  ];
  const style = {
    top: "50%",
    right: 0,
    transform: "translate(0, -50%)",
    lineHeight: "24px",
  };
  return (
    <div>
      <RadialBarChart
        width={500}
        height={300}
        cx={150}
        cy={150}
        innerRadius={20}
        outerRadius={140}
        barSize={10}
        data={data}
      >
        <RadialBar
          minAngle={15}
          label={{ position: "insideStart", fill: "#fff" }}
          background
          clockWise
          dataKey="uv"
        />
        <Legend
          iconSize={10}
          width={120}
          height={140}
          layout="vertical"
          verticalAlign="middle"
          wrapperStyle={style}
        />
      </RadialBarChart>
    </div>
  );
}
export default ReRadialBarChart;

Register New Component

Open the src/App.js file, import the component by including the following code in the main entry of React.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReRadialBarChart from "./components/ReRadialBarChart";
function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">
        React Recharts Radial Bar Chart Component Example
      </h2>
      <ReRadialBarChart />
    </div>
  );
}
export default App;

View App on Browser

To start the development server and open your new React app in a web browser, run:

npm start

This will launch the app at:

http://localhost:3000

Congratulations, you have successfully built the radial bar chart in React app!

Conclusion

A radial bar chart is really useful as well as aesthetically vibrant tool that shows data in a circular format.

React is a popular JavaScript library that allows you build intuitive SPA user interfaces. On top of that, it offers tons of powerful tools for building dynamic yet interactive data visualizations strategies.

With the help of React charting libraries such as Recharts, developers can easily create customizable and responsive radial bar charts that can be integrated into web applications.

In this tutorial, we learned how to implement radial chart in React. Not just that, we also learned how to interpret complex data sets using the Recharts simple radial bar chart.