ArpiJakab / react-svg-donut-chart

A lightweight responsive donut chart React component using only SVG

react-svg-donut-chart

A lightweight responsive donut chart React component using only SVG

Getting started

You can download react-svg-donut-chart from the NPM registry via the npm or yarn commands

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

https://unpkg.com/react-svg-donut-chart/dist/react-svg-donut-chart.min.js.

Usage

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

Contributing

• ⇄ Pull/Merge requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests (npm test).

See CONTRIBUTING.md guidelines

Changelog

See changelog

License

This project is licensed under the MIT License - see the LICENCE.md file for details