UNPKG

react-svg-donut-chart

Version:

A lightweight responsive donut chart React component using only SVG

77 lines (50 loc) 2.42 kB
# 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 [![react-svg-donut-chart](https://nodei.co/npm/react-svg-donut-chart.png?downloads=true&downloadRank=true&stars=true)](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