React minimal pie chart

Lightweight React SVG pie charts, with versatile options and CSS animation included. < 3kB gzipped. 👏Demo 👏.

import PieChart from 'react-minimal-pie-chart';

<PieChart
  data={[
    { title: 'One', value: 10, color: '#E38627' },
    { title: 'Two', value: 15, color: '#C13C37' },
    { title: 'Three', value: 20, color: '#6A2135' },
  ]}
/>;

Installation

npm install react-minimal-pie-chart

If you don't use a package manager, react-minimal-pie-chart exposes also an UMD module ready for the browser.

https://unpkg.com/react-minimal-pie-chart/dist/index.js

Why?

Because Recharts is awesome, but when you just need a simple pie/donought chart, 3kB of code are usually enough.

Features

< 3kB gzipped
Versatile: Pie, Donut, Loading, Completion charts (see Demo)
Customizable chart labels
Customizable CSS animations with stroke-dasharray + stroke-dashoffset strategy
Typescript types included
No dependencies (except for React's prop-types)

Options

Property	Type	Description	Default
data (required)	Array	The source data which each element is a segment.	-
cx	Number	The x-coordinate of center. The value is the percentage of the component width	50
cy	Number	The y-coordinate of center. The value is the percentage of the component height	50
ratio	Number	The ratio of rendered svg element	1
startAngle	Number	The start angle of first sector	0
lengthAngle	Number	The total angle taken by the chart (can be negative to make the chart clockwise!)	360
totalValue	Number	The total value represented by the full chart	-
radius	Number	The radius of the pie. The value is the percentage of the component's width	50
lineWidth	Number	The width of the line representing each sector. The value is the percentage of chart's radio (100 === full pie)	100
paddingAngle	Number	The angle between two sectors	-
rounded	Bool	Round line caps of each sector	false
segmentsStyle	Object	Style object assigned each segment	-
background	String	Segments' background color	-
animate	Bool	Animate sectors on component mount	false
animationDuration	Number	Animation duration in ms	500
animationEasing	String	Animation CSS easing	"ease-out"
reveal	Number	Turn on CSS animation and reveal just a percentage of each segment	-
injectSvg	Function	Inject `<svg>` element with the output of the provided function (eg. gradients)	-
label	Boolean, ReactElement, Function	If true set, labels will be drawn automatically. If ReactElement set, the option can be the custom label element. If set a function, the function will be called to render customized label.	false
labelPosition	Number	Label position from origin. The value is the percentage of chart's radio (50 === middle point)	50
labelStyle	Object	Style object assigned by default to each label	-
onClick	Function	Custom event handler of `onClick` on each sector : `(event, data, dataIndex) => {}`	-
onMouseOver	Function	Custom event handler of `onMouseOver` on each sector : `(event, data, dataIndex) => {}`	-
onMouseOut	Function	Custom event handler of `onMouseOut` on each sector : `(event, data, dataIndex) => {}`	-

About `props.data`

props.data expects the following array of entries:

type dataProps = {
  value: number,
  color: string,
  title?: string | number,
  key?: string | number,
  style?: {[key: string]: string | number},
}[];

Each data entry optionally accepts:

a key property just in case items' indexes weren't enough
a style property targeting the corresponding chart segment

Custom labels with `label` prop

When label is a function or ReactElement, the provided entity will be called with the following labelProps object respectively as argument or as props:

type labelProps = {
  key: string,
  x: number,
  y: number,
  dx: number,
  dy: number,
  textAnchor: string,
  data: {
    // props.data entry extended with:
    degrees: number,
    startOffset: number,
    percentage: number,
  }[],
  dataIndex: number,
  color: string,
  style: {[key: string]: string | number},
};

`label` as function

The provided function is called with labelProps as argument and is supposed to return the string, number or element rendered as label content.

<PieChart label={(labelProps: labelProps) => string | number | ReactElement} />

`label` as React element

The provided React element will get labelProps object as props.

<PieChart label={<CustomLabel />} />

See some examples in the demo source.

How to

User interactions with the chart

See demo and its source.

Browsers support

The main requirement of this library is an accurate rendering of SVG Stroke properties.

Not supported	Partially supported
IE ≤ 10	IE 11
	Edge (Upcoming Blink adoption should make it fully supported)

A Math.sign polyfill is needed to support legacy browsers.

Misc

How svg arc paths work?

Size comparison

	size (by Bundlefobia)	size (by size-limit)
react-minimal-pie-chart		2.8 KB (v4.0.0)
rechart		93 KB (v1.5.0)
victory-pie		54 KB (v32.2.0)

Sizes in the third column are calculated with a "real-world" setup: see source repo.

Todo's

Make a device/browser compatibility table
Consider moving storybook deployment to CI
Configure Babel to not inject the _extend utility in compiled artifact
Add .browserslistrc to get rid of some Babel helpers

Contributors

Thanks to you all (emoji key):

_{Andrea Carraro} 💻 📖 🚇 ⚠️ 👀	_{Stephane Rufer} 🐛 💻	_{Jørgen Aaberg} 💻	_{Tobiah Rex} 🐛	_{Edward Xiao} 🐛	_{David Konsumer} 💻 📖 💡 🤔	_Ori 🤔
_{Emmanouil Konstantinidis} 🐛	_yuruc 💻	_luca-esse 🐛	_{Oscar Mendoza} 🐛 💻