react-doughnut 🍩

Simple and customizable doughnut chart component for react projects.

Installation

Using npm:

npm install react-doughnut

Watch Demo here

Screenshots

API

props

name	type	default	description
hasEqualParts	Boolean	true	Divides Donut in equal parts if value is "true". If "false" divided acc. to applied values
doughnutsize	String	medium (additional - large & short)	Specifies Size of Doughnut Chart
doughnutparts	Number	5 (additional - 1,2,3,4)	Parts as of Layer - specifies how many parts it will contain
doughnutcolors	Object	{c1:'#D1A917',c2:'#2C9DC2',c3:'#D12A6A',c4:'#535353',c5:'#AC6946'}	Pass Color Object in respect to parts you specified.for eg. 3 values({c1:'#D1A917',c2:'#2C9DC2',c3:'#D12A6A'}) if you applied for 3 parts()
doughnutvalues	Object	{p1:5,p2:20,p3:25,p4:30,p5:20}	Pass values if you passed "false" to `hasEqualParts` props. This will randomize values of specific parts.

Usage

import Doughnut from 'react-doughnut';
import React from "react";
import ReactDOM from "react-dom";
 
import "./styles.css";
 
function App() {
  return (
    <div className="App">
      <Doughnut 
    hasEqualParts={true} 
    doughnutsize="medium" 
    doughnutparts={5} 
    doughnutcolors={{c1:'#D1A917',c2:'#2C9DC2',c3:'#D12A6A',c4:'#535353',c5:'#AC6946'}} 
    doughnutvalues={{p1:5,p2:20,p3:25,p4:30,p5:20}} 
    />
    </div>
  );
}
 
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);