Skip to content
Lightweight but versatile SVG pie/donut charts for React. < 3kB gzipped.
JavaScript TypeScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Reformat codebase with Prettier Aug 7, 2018
.storybook Get rid of babel-core Mar 24, 2019
jest Remove this.props proliferation in render method Nov 20, 2019
src Remove this.props proliferation in render method Nov 20, 2019
stories Introduce custom viewBoxSize prop (#107) Nov 20, 2019
.all-contributorsrc
.editorconfig initial commit Mar 2, 2017
.gitignore Remove eslint Jun 8, 2019
.npmrc Add .npmrc file Aug 21, 2018
.prettierignore Autodeploy storybook to github pages Feb 22, 2019
.prettierrc Introduce Prettier and Eslint basic presets Aug 7, 2018
.travis.yml Run CI against last LTS Node only Jul 3, 2019
CHANGELOG.md Introduce custom viewBoxSize prop (#107) Nov 20, 2019
LICENSE.md initial commit Mar 2, 2017
README.md Update contributors Nov 20, 2019
babel.config.js Remove eslint Jun 8, 2019
jest.setup.js Remove enzyme Oct 14, 2019
package-lock.json Update Update rollup monorepo packages Oct 30, 2019
package.json Update Update rollup monorepo packages Oct 30, 2019
renovate.json Update renovate.json Oct 29, 2019
rollup.config.js Switch from .babelrc to babel.config.js Jun 7, 2019

README.md

React minimal pie chart

Build Status Npm version Coveralls Bundle size

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

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
viewBoxSize Array of Numbers Width and Height of SVG viewBox attribute [100, 100]
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 Bundle size: React minimal pie chart 2.8 KB (v4.0.0)
rechart Bundle size: Recharts 93 KB (v1.5.0)
victory-pie Bundle size: 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
Andrea Carraro

💻 📖 🚇 ⚠️ 👀
Stephane Rufer
Stephane Rufer

🐛 💻
Jørgen Aaberg
Jørgen Aaberg

💻
Tobiah Rex
Tobiah Rex

🐛
Edward Xiao
Edward Xiao

🐛
David Konsumer
David Konsumer

💻 📖 💡 🤔
Ori
Ori

🤔
Emmanouil Konstantinidis
Emmanouil Konstantinidis

🐛
yuruc
yuruc

💻
luca-esse
luca-esse

🐛
Oscar Mendoza
Oscar Mendoza

🐛 💻
damien-git
damien-git

🐛 🤔
Vianney Stroebel
Vianney Stroebel

🐛 🤔
You can’t perform that action at this time.