React minimal pie chart

Lightweight React SVG pie charts, with versatile options and CSS animation included. 👏  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, 3 kB of code are usually enough.

Features

• No dependencies (except for React's prop-types)
• Customizable CSS animations with stroke-dasharray + stroke-dashoffset strategy
• Configurable: Pie, Donut, Loading, Completion charts, Labels (see Demo)

Options

label prop

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

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

See some examples in the demo source.

Optional data.key value

Each data entry can also accept an optional key property just in case items' indexes weren't enough:

{ value: 10, key: 1, color: '#E38627' }

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

• IE ≤ 10

Partially supported

• IE 11

Misc

How svg arc paths work?

https://codepen.io/lingtalfi/pen/yaLWJG

Size comparison

3kB

Todo's

• Find a better paddingAngle implementation
• Make a device/browser compatibility table
• Background segment
• Consider switching ReactMinimalPieChart to extend default React.Component
• Consider moving storybook deployment to CI
• Update to babel 7 along with Storybook
• Get rid of duplicated looping logic in makeSegments and makeLabels
• Configure Babel's "transform-object-rest-spread" with "useBuiltIns": true
• Consider migrating source to TypeScript

Contributors

Thanks to you all (emoji key):

Andrea Carraro 💻 📖 🚇 ⚠️ 👀	Stephane Rufer 🐛 💻	Jørgen Aaberg 💻	Tobiah Rex 🐛	Edward Xiao 🐛	David Konsumer 💻 📖 💡 🤔	Ori 🤔

3.5.0

• Add support for labels with props: label, labelPosition and labelStyle
• Minor internal refactoring

3.4.1

• Fix chart to render data.title value as <title> inside <path> element

3.4.0

• Support injectSvg function property to inject any element into rendered <svg> element

3.3.0

• Support data.title property to render <title> inside <path> element

3.2.0

• Add UMD export

3.1.0

• Add segments interaction callbacks: onClick, onMouseOver, onMouseOut
• Add segmentsStyle prop
• Setup up Prettier

3.0.2

• Prevent initial animation when component is unmounted

3.0.1

• Update react/react-dom peer dependency version to accept versions 15 and 16

3.0.0

• Make SVG element display: block to remove undesired spacing

2.0.0

• Compile with Rollup.js to bundle with a transpiled version of svg-partial-circle v0.2.0

1.1.0

• Migrate React's prop types to external prop-types package
• Swap react-addons-test-utils with react-test-renderer as enzyme required dependencies

1.0.0

• Enable negative lengthAngle to configure clockwise and counterclockwise charts
• Add rx and ry props to set custom chart center coordinates
• Add ratio prop
• Add radius prop
• Re-evaluate segments size when paddingAngle is > 0
• Make counterclockwise charts by default
• Make <ReactMinimalPieChart> a pure component
• Add eslint parsing

0.0.2

• Incorporate svg-partial-circle lib

0.0.1

• Fix bad imports

0.0.0

• Initial release