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

| 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 | - | | 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) => {} | - |

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🤔 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: |