react-d3-pie

React component to create a d3 pie chart

demo

• see a live demo

Install

$ npm install react-d3-pie

Run Demo

git clone https://github.com/zuoq/react-d3-pie.git
cd react-d3-pie
npm install
npm demo

Usage

const initData = [
   {name: 'test1', value: 1},
   {name: 'test2', value: 2},
   {name: 'test3', value: 3}
];
import {Pie} from 'react-de-pie';
<Pie width={500}
     height={400}
     data={initData}
     colors={['red','green','yellow']}
     innerRadius={0.4}
     outerRadius={0.8}
/>

API

param	description	type	default
width	The width of the pie chart rendering area (unit: px)	number	500
width	The height of the pie chart rendering area (unit: px)	number	400
data	The data of the pie chart rendering area	array	[ {name: 'test1', value: 1}, {name: 'test2', value: 2}, {name: 'test3', value: 3}]
colors	Pie chart rendering colors	array	d3.schemeCategory10
innerRadius	Relative multiple of the radius inside the pie chart (range 0~0.8)	number	0.4
outerRadius	Relative multiple of the outer radius of the pie chart (range 0~0.8)	number	0.8

• note
  • When the width and height are too small, the text will be displayed in grammar
  • The innerRadius must be smaller than the outerRadius

Author

• github/zuoq