react-doughnut 🍩

Simple and customizable doughnut chart component for react projects.

Installation


Using npm:
``
npm install react-doughnut
`

$3




Screenshots

!alt text

API

$3

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

`js
import Doughnut from 'react-doughnut';
import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
return (


);
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
``