react-doughnut
Simple and customizable doughnut chart component for react projects.
Last updated a year ago by meetzaveri .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-doughnut 
SYNC missed versions from official npm registry.

react-doughnut ????

Simple and customizable doughnut chart component for react projects.

Installation

NPM version

Using npm:

npm install react-doughnut

Watch Demo here

Screenshots

alt text

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

Current Tags

  • 1.2.1                                ...           latest (a year ago)

24 Versions

  • 1.2.1                                ...           a year ago
  • 1.2.0                                ...           a year ago
  • 1.1.9                                ...           a year ago
  • 1.1.8                                ...           a year ago
  • 1.1.7                                ...           2 years ago
  • 1.1.6                                ...           2 years ago
  • 1.1.5                                ...           2 years ago
  • 1.1.4                                ...           2 years ago
  • 1.1.3                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.1.0                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 25
Dependencies (8)
Dev Dependencies (11)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |