react-d3-pie

react component to create a d3 pie chart

Usage no npm install needed!

<script type="module">
  import reactD3Pie from 'https://cdn.skypack.dev/react-d3-pie';
</script>

README

react-d3-pie

React component to create a d3 pie chart

demo

test

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