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.