react-doughnut 🍩

Simple and customizable doughnut chart component for react projects.

Installation

Using npm:

npm install react-doughnut

Watch Demo here

Screenshots

API

props

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);