react-svg-donut-chart
Version:
A lightweight responsive donut chart React component using only SVG
77 lines (50 loc) • 2.42 kB
Markdown
# react-svg-donut-chart
[![npm package][npm-badge]][npm]
[![Travis][build-badge]][build]
[![Codecov][codecov-badge]][codecov]
![Module formats][module-formats]
A lightweight responsive donut chart React component using only SVG
## Getting started
[](https://nodei.co/npm/react-svg-donut-chart/)
You can download `react-svg-donut-chart` from the NPM registry via the `npm` or `yarn` commands
```shell
yarn add react-svg-donut-chart
npm install react-svg-donut-chart --save
```
If you don't use package manager and you want to include `react-svg-donut-chart` directly in your html, you could get it from the UNPKG CDN
```html
https://unpkg.com/react-svg-donut-chart/dist/react-svg-donut-chart.min.js.
```
## Usage
```javascript
import React from "react"
import DonutChart from "react-svg-donut-chart"
const dataPie = [
{value: 100, stroke: "#22594e", strokeWidth: 6},
{value: 60, stroke: "#2f7d6d"},
{value: 30, stroke: "#3da18d"},
{value: 20, stroke: "#69c2b0"},
{value: 10, stroke: "#a1d9ce"},
]
const App = () => <DonutChart data={data} />
```
## Demo
See [Demo page][github-page]
## 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-donut-chart.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-svg-donut-chart
[build-badge]: https://img.shields.io/travis/xuopled/react-svg-donut-chart/master.svg?style=flat-square
[build]: https://travis-ci.org/xuopled/react-svg-donut-chart
[codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-svg-donut-chart.svg?style=flat-square
[codecov]: https://codecov.io/gh/xuopled/react-svg-donut-chart
[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-donut-chart
[github-issue]: https://github.com/xuopled/react-svg-donut-chart/issues/new