Skip to content

elmehdiamlou/react-pie-graph-chart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Pie Graph Chart


Edit On CodeSandbox

Installation

npm install react-pie-graph-chart
yarn add react-pie-graph-chart

Usage

1 . Require react-pie-graph-chart after installation

import PieChart from 'react-pie-graph-chart';

2 . Include PieChart component

<PieChart data={...} />

Configuration

data prop expects an array of objects that accepts the following properties:

  • type: key value.

  • value: represents the percentage that each slice is worth.

  • color: slice color need to be in hexadecimal.

Example

<PieChart data={[
    {
      type: "Bus",
      value: 235,
      color: "#E97D30"
    },
    {
      type: "Bicycle",
      value: 165,
      color: "#62B170"
    },
    {
      type: "Train",
      value: 90,
      color: "#F1AF13"
    },
    {
      type: "Car",
      value: 345,
      color: "#4BA2DA"
    }
  ]} />

👍 If you liked this repository

⭐ Feel free to leave a star

About

A pie chart represented with relative frequencies

Topics

Resources

Stars

Watchers

Forks