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

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

Each data entry can optionally accept:

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

interface 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?

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

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