All Projects → toomuchdesign → React Minimal Pie Chart

toomuchdesign / React Minimal Pie Chart

Licence: mit
🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to React Minimal Pie Chart

Modali
A delightful modal dialog component for React, built from the ground up to support React Hooks.
Stars: ✭ 183 (-25.31%)
Mutual labels:  react-components
Nano Component
Fast & simple React component styles in under 1kb
Stars: ✭ 202 (-17.55%)
Mutual labels:  react-components
React Native demo
react-native实现网易新闻和美团,实现大部分页面。使用最新的react-navigation等组件,同时支持安卓和iOS设备。
Stars: ✭ 237 (-3.27%)
Mutual labels:  react-components
Griffith
A React-based web video player
Stars: ✭ 2,287 (+833.47%)
Mutual labels:  react-components
Styled Bootstrap Components
The bootstrap components made with styled-components 💅
Stars: ✭ 196 (-20%)
Mutual labels:  react-components
Slider
React Slider
Stars: ✭ 2,681 (+994.29%)
Mutual labels:  react-components
Enact
An app development framework built atop React that’s easy to use, performant and customizable.
Stars: ✭ 178 (-27.35%)
Mutual labels:  react-components
Element React
Element UI
Stars: ✭ 2,690 (+997.96%)
Mutual labels:  react-components
React Ui Library Tutorial
📚React组件库搭建指南
Stars: ✭ 201 (-17.96%)
Mutual labels:  react-components
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+1102.45%)
Mutual labels:  react-components
React Materials
Migrate to: https://github.com/alibaba-fusion/materials
Stars: ✭ 189 (-22.86%)
Mutual labels:  react-components
Reactour
Tourist Guide into your React Components
Stars: ✭ 2,782 (+1035.51%)
Mutual labels:  react-components
Tailwind React Ui
React utility component primitives & UI framework for use with Tailwind CSS
Stars: ✭ 220 (-10.2%)
Mutual labels:  react-components
React Components
List of React components I use and recommend
Stars: ✭ 182 (-25.71%)
Mutual labels:  react-components
Hx
A simple, easy to use library for React development in ClojureScript.
Stars: ✭ 240 (-2.04%)
Mutual labels:  react-components
Notus React
Notus React: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 173 (-29.39%)
Mutual labels:  react-components
Yoshino
A themable React component library!Flexible Lightweight PC UI Components built on React! Anyone can generate easily all kinds of themes by it!
Stars: ✭ 216 (-11.84%)
Mutual labels:  react-components
Githubpopular Sj
慕课网实战课程:《React Native 开发跨平台 GitHub App》Demo
Stars: ✭ 246 (+0.41%)
Mutual labels:  react-components
Coreui React
CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.
Stars: ✭ 239 (-2.45%)
Mutual labels:  react-components
React Npm Boilerplate
Boilerplate for creating React Npm packages with ES2015
Stars: ✭ 226 (-7.76%)
Mutual labels:  react-components

React minimal pie chart

Build Status Npm version Coveralls Bundle size

Lightweight React SVG pie charts, with versatile options and CSS animation included. < 2kB gzipped. 👏 Demo 👏.

React minimal pie chart preview

Why?

Because Recharts is awesome, but when you just need a simple pie/donought chart, 3kB 2kB are usually enough.

Size
by Bundlefobia
Benchmark Size * Loading time
on a slow 3g *
react-minimal-pie-chart (v8.2.0) Bundle size: React minimal pie chart 1.83 KB ~38 ms
rechart (v1.8.5) Bundle size: Recharts 96.9 KB ~1900 ms
victory-pie (v34.1.3) Bundle size: Victory pie 50.5 KB ~1100 ms
react-apexcharts (v1.3.7) Bundle size: React apec charts 114.6 KB ~2300 ms
react-vis (v1.11.7) Bundle size: React vis 78.3 KB ~1600 ms

* Benchmark carried out with size-limit with a "real-world" setup: see benchmark repo. (What matter here are not absolute values but the relation between magnitudes)

Features

  • < 2kB gzipped
  • Versatile: Pie, Donut, Loading, Completion charts (see Demo)
  • Customizable chart labels and CSS animations
  • Written in Typescript
  • No dependencies

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

Minimum supported Typescript version: >= 3.8

Usage

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' },
  ]}
/>;

Options

Property Type Description Default
data DataEntry[] Source data. Each entry represents a chart segment []
lineWidth number (%) Line width of each segment. Percentage of chart's radius 100
startAngle number Start angle of first segment 0
lengthAngle number Total angle taken by the chart (can be negative to make the chart clockwise!) 360
totalValue number Total value represented by the full chart -
paddingAngle number Angle between two segments -
rounded boolean Round line caps of each segment -
segmentsShift numberor:(segmentIndex) => number Translates segments radially. If number set, provide shift value relative to viewBoxSize space. If function, return a value for each segment.(radius prop might be adjusted to prevent segments from overflowing chart's boundaries) -
segmentsStyle CSSObjector:(segmentIndex) => CSSObject Style object assigned to each segment. If function, return a value for each segment -
segmentsTabIndex number tabindex attribute assigned to segments -
label (labelRenderProps) => string | number | ReactElement A function returning a label value or the SVG element to be rendered as label -
labelPosition number (%) Label position from origin. Percentage of chart's radius (50 === middle point) 50
labelStyle CSSObjector:(segmentIndex) => CSSObject Style object assigned to each label. If function set, return style for each label -
animate boolean Animate segments on component mount -
animationDuration number Animation duration in ms 500
animationEasing string A CSS easing function ease-out
reveal number (%) Turn on CSS animation and reveal just a percentage of each segment -
background string Segments' background color -
children ReactElement (svg) Elements rendered as children of SVG element (eg. SVG defs and gradient elements) -
radius number (user units) Radius of the pie (relative to viewBoxSize space) 50
center [number, number] x and y coordinates of center (relative to viewBoxSize space) [50, 50]
viewBoxSize [number, number] width and height of SVG viewBox attribute [100, 100]
onBlur (e, segmentIndex) => void onBlur event handler for each segment -
onClick (e, segmentIndex) => void onClick event handler for each segment -
onFocus (e, segmentIndex) => void onFocus event handler for each segment -
onKeyDown (e, segmentIndex) => void onKeyDown event handler for each segment -
onMouseOut (e, segmentIndex) => void onMouseOut event handler for each segment -
onMouseOver (e, segmentIndex) => void onMouseOver event handler for each segment -
.oOo.oOo.oOo.oOo.oOo.oOo.oOo.

About data prop

data prop expects an array of chart entries as follows:

type Data = {
  color: string;
  value: number;
  key?: string | number;
  title?: string | number;
  [key: string]: any;
}[];

Each entry accepts any custom property plus the following optional ones:

Custom labels with label render prop

label prop accepts a function returning the string, number or element rendered as label for each segment:

<PieChart
  label={(labelRenderProps: LabelRenderProps) =>
    number | string | React.ReactElement | undefined | null
  }
/>

The function receives labelRenderProps object as single argument:

type LabelRenderProps = {
  x: number;
  y: number;
  dx: number;
  dy: number;
  textAnchor: string;
  dataEntry: {
    ...props.data[dataIndex]
    // props.data entry relative to the label extended with:
    startAngle: number;
    degrees: number;
    percentage: number;
  };
  dataIndex: number;
  style: React.CSSProperties;
};

Label prop, common scenarios

Render entries' values as labels:

label={({ dataEntry }) => dataEntry.value}

Render segment's percentage as labels:

label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}

See examples in the demo source.

How to

User interactions with the chart

See demo and relative source here and here.

Custom tooltip

See demo and relative source.

Browsers support

Here is an updated browsers support list 🔍.

The main requirement of this library is an accurate rendering of SVG Stroke properties.

Please consider that Math.sign and Object.assign polyfills are required to support legacy browsers.

Misc

How svg arc paths work?

How SVG animations work?

This library uses the stroke-dasharray + stroke-dashoffset animation strategy described here.

Todo's

  • Consider moving storybook deployment to CI
  • Consider using transform to mutate segments/labels positions
  • Consider exposing a reduced chart variation including just a subset of the features
  • Consider abstracting React bindings to re-use business logic with other frameworks
  • Remove defaultProps in favour of JS default arguments
  • Provide a way to supply svg element with any extra prop
  • Consider removing import type declaration from generated type definition files (if possible) to ensure Typescript 3.0+ backward compatibility

Contributors

Thanks to you all (emoji key):


Andrea Carraro

💻 📖 🚇 ⚠️ 👀

Stephane Rufer

🐛 💻

Jørgen Aaberg

💻

Tobiah Rex

🐛

Edward Xiao

🐛

David Konsumer

💻 📖 💡 🤔

Ori

🤔

Emmanouil Konstantinidis

🐛

yuruc

💻

luca-esse

🐛

Oscar Mendoza

🐛 💻

damien-git

🐛 🤔

Vianney Stroebel

🐛 🤔

Maxime Zielony

🐛 💻

Raz Kedem

🐛

Blocksmith

🐛

Jamie Talbot

🐛

Oscar Yixuan Chen

🐛

RuiRocha1991

🐛

Roman Kushyn

🐛

Divjot Singh

💻
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].