# react-svg-piechart > A lightweight responsive pie chart component for React using only SVG Latest version **2.4.2** (published 2020-11-04) · MIT license · 0 weekly downloads ## Install ```sh npm install react-svg-piechart pnpm add react-svg-piechart yarn add react-svg-piechart bun add react-svg-piechart ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.4.2 | | Published | 2020-11-04 | | First published | 2015-06-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 87.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 42 | | Author | Cédric Delpoux | | Maintainers | cedricdelpoux | | Keywords | react, pie, chart, piechart, responsive, svg | ## Links - npm: https://www.npmjs.com/package/react-svg-piechart - Repository: https://github.com/xuopled/react-svg-piechart - Homepage: https://github.com/xuopled/react-svg-piechart#readme - Issues: https://github.com/xuopled/react-svg-piechart/issues - npm.io page: https://npm.io/package/react-svg-piechart ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 2.4.2 (latest) — 2020-11-04 - 2.4.1 — 2019-09-23 - 2.4.0 — 2019-03-20 - 2.3.0 — 2019-03-13 - 2.2.0 — 2019-03-12 - 2.1.1 — 2018-06-13 - 2.1.0 — 2018-04-27 - 2.0.3 — 2018-01-18 - 2.0.2 — 2017-12-15 - 2.0.1 — 2017-12-06 - 2.0.0 — 2017-12-06 - 1.4.0 — 2017-09-28 - 1.3.0 — 2017-07-05 - 1.2.3 — 2017-05-11 - 1.2.2 — 2017-05-11 - … 4 more at https://npm.io/package/react-svg-piechart/versions ## README # react-svg-piechart [![npm package][npm-badge]][npm] [![Travis][build-badge]][build] [![Codecov][codecov-badge]][codecov] ![Module formats][module-formats] A lightweight responsive React pie chart component using only SVG ## Getting started [![react-svg-piechart](https://nodei.co/npm/react-svg-piechart.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-svg-piechart/) You can download `react-svg-piechart` from the NPM registry via the `npm` or `yarn` commands ```shell yarn add react-svg-piechart npm install react-svg-piechart --save ``` If you don't use package manager and you want to include `react-svg-piechart` directly in your html, you could get it from the UNPKG CDN ```html https://unpkg.com/react-svg-piechart/umd/react-svg-piechart.js ``` ## Demo See [Demo page](https://cedricdelpoux.github.io/react-svg-piechart/) ## Usage ```js import React from "react" import ReactSvgPieChart from "react-svg-piechart" const data = [ {title: "Data 1", value: 100, color: "#22594e"}, {title: "Data 2", value: 60, color: "#2f7d6d"}, {title: "Data 3", value: 30, color: "#3da18d"}, {title: "Data 4", value: 20, color: "#69c2b0"}, {title: "Data 5", value: 10, color: "#a1d9ce"}, ] const MyCompo = () => ( { if (d) { console.log("Mouse enter - Index:", i, "Data:", d, "Event:", e) } else { console.log("Mouse leave - Index:", i, "Event:", e) } }} /> ) ``` ### Props | Name | PropType | Description | Default | | ------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ | ---------- | | data | Array of data Objects | One data is {value: number (required), color: string, title: string, expanded: bool, href: string} | [] | | expandedIndex | Number | Pass in an index to manually control the expanded sector of the pie | expandOnHover | Boolean | Active hover and touch (mobile) effects | false | | onSectorHover | Function | Callback when one sector is hovered or touched (mobile) - ex: `(data, index, event) => {}` | null | | expandSize | Number | expand size, in pixels. Used if `expandOnHover` is active or one data has `expanded` attribute set to `true` | | | strokeColor | String | Sector stroke color | "#fff" | | startAngle | Number | Angle to start drawing sectors from measured clockwise from the x-axis | 0 | | angleMargin | Number | Angle of margin between sectors | 0 | | strokeLinejoin | String | Sector stroke line join (One of `miter`, `round`, `bevel`) | "round" | | strokeWidth | Number | Sector width, in pixels (0 to disable stroke) | 1 | | viewBoxSize | Number | SVG viewbox width and height | 100 | | transitionDuration | String | CSS property for transition-duration, set to `0s` to disable transition | "0s" | | transitionTimingFunction | String | CSS Property for transition-timing-function | "ease-out" | ## Contributing * ⇄ Pull/Merge requests and ★ Stars are always welcome. * For bugs and feature requests, please [create an issue][github-issue]. * Pull requests must be accompanied by passing automated tests (`npm test`). See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines ## Changelog See [changelog](./CHANGELOG.md) ## License This project is licensed under the MIT License - see the [LICENCE.md](./LICENCE.md) file for details [npm-badge]: https://img.shields.io/npm/v/react-svg-piechart.svg?style=flat-square [npm]: https://www.npmjs.org/package/react-svg-piechart [build-badge]: https://img.shields.io/travis/xuopled/react-svg-piechart/master.svg?style=flat-square [build]: https://travis-ci.org/xuopled/react-svg-piechart [codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-svg-piechart.svg?style=flat-square [codecov]: https://codecov.io/gh/xuopled/react-svg-piechart [module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square [github-page]: https://xuopled.github.io/react-svg-piechart [github-issue]: https://github.com/xuopled/react-svg-piechart/issues/new --- _Source: https://npm.io/package/react-svg-piechart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._