# st-ring-chart

> [![npm version](https://badge.fury.io/js/st-ring-chart.svg)](https://badge.fury.io/js/st-ring-chart) # Ring Chart

Latest version **1.0.7** (published 2020-05-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install st-ring-chart
pnpm add st-ring-chart
yarn add st-ring-chart
bun add st-ring-chart
```

## 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.7 |
| Published | 2020-05-25 |
| First published | 2020-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 169.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | shimital |
| Maintainers | shimital |
| Keywords | angular, angular9, ring-chart, pie-chart, component, angular-component, doughnut, doughnut-chart |

## Links

- npm: https://www.npmjs.com/package/st-ring-chart
- Repository: https://github.com/shimital/ring-chart
- Homepage: https://github.com/shimital/ring-chart#readme
- Issues: https://github.com/shimital/ring-chart/issues
- npm.io page: https://npm.io/package/st-ring-chart

## 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

- 1.0.7 (latest) — 2020-05-25
- 1.0.6 — 2020-05-25
- 1.0.5 — 2020-05-25
- 1.0.4 — 2020-05-22
- 1.0.3 — 2020-05-21
- 1.0.2 — 2020-05-21
- 1.0.1 — 2020-05-21
- 1.0.0 — 2020-05-21
- 0.0.4 — 2020-05-21
- 0.0.3 — 2020-05-14
- 0.0.2 — 2020-05-14

## README

[![npm version](https://badge.fury.io/js/st-ring-chart.svg)](https://badge.fury.io/js/st-ring-chart)
# Ring Chart

Simple Ring-Chart/Pie-Chart angular component with 1 or more sections (see [demo](https://shimital.github.io/ring-chart/))

<img src="assets/ring.png" width="150" height="150"/>

## Getting started

### Install 
#### NPM
`npm install --save st-ring-chart`

#### YARN

`yarn add st-ring-chart`

#### Import The Ring Chart module
```js
import { RingChartModule } from 'st-ring-chart';

@NgModule({
  declarations: [AppComponent],
  imports: [RingChartModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

#### See Usage At The Demo Project

## API

| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [sections] | `RingSectionItem[]` | `[]` | Yes | represents the chart sections, every section is in the form of: ``` {"color": string, "percentage": number}```. Sum of section percentages must be equal to 1 |
| [thickness] | `number` (px) | 5 | No | The width of the ring. When this number is half or greater the ring diameter it fills the ring entirely and it becomes a pie. |
| [diameter] | `number` (px) | 0 | Yes | The Ring/Pie diameter. |
| [centerColor] | `string` | background | No | The color of the ring center. It is recommended to pass this parameter in order to avoid some display artifacts where the sections intersect |


## Development

Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

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