# react-native-arc-chart-view

> Arc chart component built for react native

Latest version **0.1.2** (published 2023-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-arc-chart-view
pnpm add react-native-arc-chart-view
yarn add react-native-arc-chart-view
bun add react-native-arc-chart-view
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2023-09-02 |
| First published | 2023-09-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Osama |
| Maintainers | aburabie |
| Keywords | react-native, expo, react-native-arc-chart-view, ReactNativeArcChartView |

## Links

- npm: https://www.npmjs.com/package/react-native-arc-chart-view
- Repository: https://github.com/OsamaAburabie/react-native-arc-chart-view
- Homepage: https://github.com/OsamaAburabie/react-native-arc-chart-view#readme
- Issues: https://github.com/OsamaAburabie/react-native-arc-chart-view/issues
- npm.io page: https://npm.io/package/react-native-arc-chart-view

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

- 0.1.2 (latest) — 2023-09-02
- 0.1.1 — 2023-09-01
- 0.1.0 — 2023-09-01

## README

# react-native-arc-chart-view

Arc chart component built for react native based on [ArcChartView](https://github.com/imaNNeo/ArcChartView)

<img src="./repo_files/images/sample_icons.png" width="200">

## Installation (Expo only)

```sh
yarn add react-native-arc-chart-view
```

```sh
npx expo prebuild
```

## Usage

```tsx
import { ReactNativeArcChartView } from "react-native-arc-chart-view";

<ReactNativeArcChartView
  sectionsCount={6}
  iconSize={60}
  sectionsSpace={5}
  linesCount={10}
  midStartExtraOffset={10}
  sectionsIcons={images}
  onFinishedSettingSectionValue={({
    nativeEvent: { sectionPos, sectionValue },
  }) => {
    console.log(sectionPos, sectionValue);
  }}
/>;
```

## Props

|           Attribute           |                   Type                    |                                Description                                 |
| :---------------------------: | :---------------------------------------: | :------------------------------------------------------------------------: |
|          linesCount           |                  number                   |       lines count of chart (i mean arc lines), default value is `10`       |
|          linesSpace           |                  number                   |             lines space (lines margin), default value is `4dp`             |
|          linesWidth           |                  number                   |                    lines width , default value is `6dp`                    |
|         sectionsCount         |                  number                   |                   sections count , default value is `8`                    |
|         sectionsSpace         |                  number                   |         sections space (sections margin) , default value is `4dp`          |
|      midStartExtraOffset      |                  number                   |             center extra offest size, default value is `16dp`              |
|           iconSize            |                  number                   |                  the icons size, default value is `32dp`                   |
|         sectionsIcons         |                 string[]                  |                 array of the icons for the chart sections                  |
|        sectionsValues         |                 number[]                  |                 array of the values for the chart sections                 |
|  onStartSettingSectionValue   | {sectionPos: number, sectionValue:number} | a callback to get the value of the changing section on start of the action |
| onContinueSettingSectionValue | {sectionPos: number, sectionValue:number} |     a callback to get the value of the changing section on drag action     |
| onFinishedSettingSectionValue | {sectionPos: number, sectionValue:number} |       a callback to get the value of the changing section on finish        |

## TODO

- [x] Android support
- [ ] iOS support
- [ ] Web support

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