# single-donut

> react donut

Latest version **1.0.14** (published 2023-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install single-donut
pnpm add single-donut
yarn add single-donut
bun add single-donut
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2023-08-15 |
| First published | 2023-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Behailu Mesganaw |
| Maintainers | behailu |
| Keywords | react, chart donut, ui, typescript, ts |

## Links

- npm: https://www.npmjs.com/package/single-donut
- Repository: https://github.com/behail/single-donut
- Homepage: https://github.com/behail/single-donut#readme
- Issues: https://github.com/behail/single-donut/issues
- npm.io page: https://npm.io/package/single-donut

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.14 (latest) — 2023-08-15
- 1.0.13 — 2023-08-15
- 1.0.12 — 2023-08-15
- 1.0.11 — 2023-08-15
- 1.0.10 — 2023-08-15
- 1.0.9 — 2023-08-15
- 1.0.8 — 2023-08-15
- 1.0.7 — 2023-08-14
- 1.0.6 — 2023-08-14
- 1.0.5 — 2023-08-14
- 1.0.4 — 2023-08-14
- 1.0.3 — 2023-08-14
- 1.0.2 — 2023-08-14
- 1.0.1 — 2023-08-14
- 1.0.0 — 2023-08-14

## README

# React Donut Single Slice

This is a straightforward React package for creating single slice donuts. It's user-friendly and can be easily incorporated into any React project that utilizes TypeScript.

## Image

<img width="120" alt="donut" src="https://github.com/behail/single-donut/assets/60188158/84f5e70e-9384-419b-ae47-c8f67aa191a0">

## Installation

Using npm:

### `npm i single-donut`

## Configure

###

```JavaScript
configure = {
svg: {
width: string,
height: string,
},
circle: {
cx: string,
cy: string,
radius: number,
fill: string,
strokeColor1: string,
strokeColor2: string,
strokeWidth: string,
},
text: {
fill: string,
textAnchor: string,
},
percentagevalue: number,

};
```

## Usage

```JavaScript

import ReactDOM from "react-dom/client";

import App from "./App";
import { ReactDonut } from "single-donut";

function App() {
 const configure = {
    svg: {
      width: "80",
      height: "80",
    },
    circle: {
      cx: "50",
      cy: "25",
      radius: 20,
      fill: "transparent",
      strokeColor1: "#aab3b2",
      strokeColor2: "#34ebe5",
      strokeWidth: "6",
    },
    text: {
      fill: "gray",
      textAnchor: "middle",
    },
    percentagevalue: 60,
  };
return (

<div>
<ReactDonut configure={configure} />
</div>
);
}

const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(<App />);
```

---
_Source: https://npm.io/package/single-donut · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._