npmpackage.info

Gathering detailed insights and metrics for react-minimal-pie-chart

Other packages similar to react-minimal-pie-chart

react-native-pie-chart

3.0.2

pie chart for react native

cucumber-html-reporter

7.2.0

Generates Cucumber HTML reports in three different themes

react-native-gifted-charts

1.4.47

The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.

igniteui-react-charts

18.7.4

Ignite UI React charting components for building rich data visualizations using TypeScript APIs.

Gathering detailed insights and metrics for react-minimal-pie-chart

react-minimal-pie-chart

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

8.4.1

410

MIT

TypeScript

2.11 kB

16,557,945 5.1

Installations

npm install react-minimal-pie-chart

Pull Requests

Open

2

Total

366

Closed

30

Merged

334

Issues

Open

5

Total

70

Closed

65

Releases

v8.4.1

Published on 08 Nov 2024

View all 1 releases

Developer

toomuchdesign

Developer Guide

BETA

Module System

CommonJS, UMD

Min. Node Version

Typescript Support

Yes

Node Version

20.11.1

NPM Version

10.2.4 Statistics

410 Stars

653 Commits

79 Forks

4 Watching

7 Branches

10 Contributors

Updated on 27 Nov 2024

Bundle Size

4.63 kB

Minified

2.11 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (99.01%)

JavaScript (0.99%)

Total Downloads

Cumulative downloads

Total Downloads

16,557,945

Last day

15,437

Compared to previous day

Last week

-1.7%

75,713

Compared to previous week

Last month

3.8%

323,975

Compared to previous month

Last year

0.7%

4,088,021

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React minimal pie chart

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, 2kB are usually enough.

	Benchmark Size *	Loading time on a slow 3g *
react-minimal-pie-chart (v9.0.0)	1.99 KB	~40 ms
rechart (v1.8.5)	96.9 KB	~1900 ms
victory-pie (v34.1.3)	50.5 KB	~1100 ms
react-apexcharts (v1.3.7)	114.6 KB	~2300 ms
react-vis (v1.11.7)	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

1npm 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

1import { PieChart } from 'react-minimal-pie-chart';
2
3<PieChart
4  data={[
5    { title: 'One', value: 10, color: '#E38627' },
6    { title: 'Two', value: 15, color: '#C13C37' },
7    { title: 'Three', value: 20, color: '#6A2135' },
8  ]}
9/>;

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	`number` or: `(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	`CSSObject` or: `(segmentIndex) => CSSObject`	Style object assigned to each segment. If `function`, return a value for each segment. (Warning: SVG only supports its own CSS props).	-
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	`CSSObject` or: `(segmentIndex) => CSSObject`	Style object assigned to each label. If `function` set, return style for each label. (Warning: SVG only supports its own CSS props).	-
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.`

Prop types are exposed for convenience:

1import type { PieChartProps } from 'react-minimal-pie-chart';

About `data` prop

data prop expects an array of chart entries as follows:

1type Data = {
2  color: string;
3  value: number;
4  key?: string | number;
5  title?: string | number;
6  [key: string]: any;
7}[];

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

key: custom value to be used as segments element keys
title: title element rendered as segment's child

Custom labels with `label` render prop

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

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

The function receives labelRenderProps object as single argument:

1type LabelRenderProps = {
2  x: number;
3  y: number;
4  dx: number;
5  dy: number;
6  textAnchor: string;
7  dataEntry: {
8    ...props.data[dataIndex]
9    // props.data entry relative to the label extended with:
10    startAngle: number;
11    degrees: number;
12    percentage: number;
13  };
14  dataIndex: number;
15  style: React.CSSProperties;
16};

Label prop, common scenarios

Render entries' values as labels:

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

Render segment's percentage as labels:

1label={({ 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 abstracting React bindings to re-use business logic with other frameworks
Provide a way to supply svg element with any extra prop
Find a better solution to assign default props

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} 💻

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/dependabot-auto-merge.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/dependabot-auto-merge.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-storybook.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/deploy-storybook.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/release.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/release.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/toomuchdesign/react-minimal-pie-chart/release.yml/master?enable=pin
Info: 0 out of 7 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 4 third-party GitHubAction dependencies pinned
Info: 2 out of 2 npmCommand dependencies pinned

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

Score

5.1

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-minimal-pie-chart

Other packages similar to react-minimal-pie-chart

react-minimal-pie-chart

Installations

Pull Requests

2

366

30

334

Issues

5

70

65

Releases

Developer

Developer Guide

CommonJS, UMD

Yes

20.11.1

10.2.4

Statistics

Bundle Size

4.63 kB

2.11 kB

Languages

Total Downloads

16,557,945

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React minimal pie chart

Why?

Features

Installation

Usage

Options

About data prop

Custom labels with label render prop

Label prop, common scenarios

How to

User interactions with the chart

Custom tooltip

Browsers support

Misc

How svg arc paths work?

How SVG animations work?

Todo's

Contributors

10

10

10

10

10

3

1

0

0

0

0

0

5.1

/10

About `data` prop

Custom labels with `label` render prop