Installation

react-simple-pie creates simple svg pie and doughnut charts for infographics like graphs and others in react applications.

Note

If you are going to use simple diagram in not react project, please use simple-pie.

Installation

npm

npm install react-simple-pie --save

pnpm

pnpm add react-simple-pie

yarn

yarn add react-simple-pie

Usage

import React from 'react';
import {SimplePie, SimpleDoughnut} from "react-simple-pie"

export default function YourComponent() {
  return (
    <section>
      <div style={{width: 200, height: 200}}>
        <SimpleDoughnut values={[1, 2, 1, 2]} />
      </div>
      <div style={{width: 200, height: 200}}>
        <SimpleDoughnut values={[1, 1, 1]} borderWidth={4} borderColor="green" />
      </div>
    </section>
  );
}

Tip

The svg height and width are 100%, so it trys to extend itself to available space. Thus, you should have wrapper with dimensions for your simple-pie diagram.

Interface

export type TPieProps = {
  values: number[];
  palette?: string[];
  borderColor?: string;
  borderWidth?: number;
};

export type TDoughnutProps = TPieProps & {
  innerRadius?: number; // 0..1 - percent from outer radius
};

Examples

<SimplePie values={[1, 2, 1, 2]} />

<SimplePie values={[1, 1, 1]} borderWidth={4} />

<SimpleDoughnut values={[1, 2, 1, 2]} />

<SimpleDoughnut
  values={[1, 1, 1]}
  borderWidth={4}
  borderColor="green"
  innerRadius={0.3}
/>