Can I Show Pie Charts on My Website? - Introducing Recharts

Pre-requisite: Basic React.js

Hello developers! Thanks in advance for your interest. Maybe at this moment, you're thinking about improving UX of your website by visualizing data in form of pie charts or something like that. Because at the end of the day, user impression mostly depends on the UX. So the good news is if you're using React, you can work on data visualization easily with Reacharts package.

What is Reacharts?
Hold on a minute before going to the main attraction. Do we know what Reacharts is? According to the official documentation, Recharts is an npm package for using in React projects built on top of the SVG elements (We can follow SVG styling rules to style) with lightweight dependency of D3 (JavaScript library to visualize data) submodules. It's customizable by changing the props values.

Installation
Okay, now! moving on to the installation.

npm install recharts

Importing Components
After installation, we can use the components of Recharts by importing. To make a simple pie chart, we need to import ResponsiveContainer, PieChart, Pie, ToolTip. ResponsiveContainer is a wrapping container with responsive behavior. PieChart is a canvas component. Inside this component, one or many Pie component can be declared. Also, Other features of the pie chart(s) of the canvas can be declared inside PieChart (such as: ToolTip). Pie is the component for printing a pie chart. Tooltip is used if we want to show details on hovering.

import React from 'react';
import { ResponsiveContainer, PieChart, Pie, Tooltip } from 'recharts';

Structure of the raw data
Let's understand the structure of the data we have to have. In this particular example, we should have an array of objects and each object will have name and value keys with their corresponding values. name (string type) would contain the title of the data and value (number type) would be the data. For example,

const data = [
  { name: 'A', value: 400 },
  { name: 'B', value: 300 },
  { name: 'C', value: 300 },
  { name: 'D', value: 200 },
  { name: 'E', value: 100 },
  { name: 'F', value: 700 },
];

Core Components and Explanation
After that, we'll be able to print our pie chart at the twinkles of an eye. We have to write our codes inside return of the component. Let's have a look of the code. Don't worry, I won't leave without explaining necessary parts.

    return (
      <ResponsiveContainer width="100%" height="100%">
        <PieChart width={400} height={400}>
          <Pie
            dataKey="value"
            isAnimationActive={true}
            data={data}
            cx="50%"
            cy="50%"
            innerRadius={0}
            outerRadius={80}
            fill="#8884d8"
            label
          />
          <Tooltip />
        </PieChart>
      </ResponsiveContainer>
    )

We have assigned the canvas size 400x400 in PieChart component. After that, we have decent amount of props in Pie components in form of SVG styling. cx and cy defines the position of x and y axis respectively. Assigning 50% both in cx and cy means the pie chart will be shown at the center. label means label={true} and we'll get the pie chart labeled with the values nicely if label is true. isAnimationTrue sets default animations. If we don't want the animation, we have to assign false. fill would be used to set background color. outerRadius defines the solid redial size. But if we want to make the pie hollow, we need to change the value of innerRadius and assign more than 0. Most importantly, We need to pass the dataset as props named data. And finally, we must have to define the dataKey prop with value, so that it can extract the value of the value key of the dataset and do the elementary math for visualizing the pie chart.

Concluding Remarks
So far, we've got enough for getting started. If you like and appreciate this blog, we'll be going deeper towards data visualization. Note: I'm not gonna attach any preview image of pie chart. Try it yourself, show us the pies and Best of luck!