# react-native-build-charts

> ## Getting started

Latest version **1.1.1** (published 2021-12-07) · 0 weekly downloads

## Install

```sh
npm install react-native-build-charts
pnpm add react-native-build-charts
yarn add react-native-build-charts
bun add react-native-build-charts
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-12-07 |
| First published | 2021-12-07 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 586.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kshitiz Sareen |
| Maintainers | kshitiz07 |
| Keywords | react-native, svg, charts, data, graphs |

## Links

- npm: https://www.npmjs.com/package/react-native-build-charts
- Repository: https://github.com/KshitizSareen/react-native-build-charts
- Homepage: https://github.com/KshitizSareen/react-native-build-charts#readme
- Issues: https://github.com/KshitizSareen/react-native-build-charts/issues
- npm.io page: https://npm.io/package/react-native-build-charts

## 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.1.1 (latest) — 2021-12-07
- 1.1.0 — 2021-12-07
- 1.0.8 — 2021-12-07
- 1.0.7 — 2021-12-07
- 1.0.6 — 2021-12-07
- 1.0.5 — 2021-12-07
- 1.0.4 — 2021-12-07

## README

# react-native-build-charts

## Getting started

Before using react-native-build-charts, you need to install react-native-svg

`$ npm install react-native-svg --save`

`$ npm install react-native-build-charts --save`

### Mostly automatic installation

`$ react-native link react-native-build-charts`

### Manual installation


#### iOS

1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-build-charts` and add `RNReactNativeBuildCharts.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNReactNativeBuildCharts.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)<

#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.reactlibrary.RNReactNativeBuildChartsPackage;` to the imports at the top of the file
  - Add `new RNReactNativeBuildChartsPackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include 'react-native-build-charts'
  	project('react-native-build-charts').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-build-charts/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-build-charts')
  	```

#### Windows
[Read it! :D](https://github.com/ReactWindows/react-native)

1. In Visual Studio add the `RNReactNativeBuildCharts.sln` in `node_modules/react-native-build-charts/windows/RNReactNativeBuildCharts.sln` folder to their solution, reference from their app.
2. Open up your `MainPage.cs` app
  - Add `using React.Native.Build.Charts.RNReactNativeBuildCharts;` to the usings at the top of the file
  - Add `new RNReactNativeBuildChartsPackage()` to the `List<IReactPackage>` returned by the `Packages` method


## Usage

## Creating a Bar chart
```javascript
import {BarChart} from 'react-native-build-charts';

<BarChart width={1000} height={600} data={[
      {
        x: 10,
        y: [10,20,30,40,50]
      },
      {
        x: 20,
        y: [10,20,30,40,50]
      },
      {
        x: 30,
        y: [10,20,30,40,50]
      }
    ]} range={3}/>
```

| Props | Data Type | Description |
| ------ | -----    |  - |
|   width     | number      |  The width of the chart             |
|   height     | number       | The height of the chart           |
|    range (optional)    | number   | The range of the y-axis |
| data | { x: any, y : Number[] }   | The data of the chart |


![Alt Text](https://raw.githubusercontent.com/KshitizSareen/react-native-build-charts/main/BarChart.png)


## Creating a Pie chart

```javascript
import { PieChart } from 'react-native-build-charts';

<PieChart size={450} data={[
      {
        x: 10,
        y: 10
      },
      {
        x: 20, 
        y: 20
      },
      {
        x: 30,
        y: 30
      }
    ]}/>
```

| Props | Data Type | Description |
| ------ | -----    |  - |
|   size     | number      |  The size of the chart             |
| data | { x: any, y : Number }   | The data of the chart |

![Alt Text](https://raw.githubusercontent.com/KshitizSareen/react-native-build-charts/main/PieChart.png)

## Creating a Line chart

```javascript
import { LineChart } from 'react-native-build-charts';

<LineChart width={1000} height={575} data={
      [
        {
        x:10,
        y:10
        },
        {
          x: 20,
          y: 20
        },
        {
          x: 30,
          y:30
        },
        {
          x: 40,
          y: 40
        },
        {
          x: 50,
          y: 50
        }
      ]
    }/>
```

| Props | Data Type | Description |
| ------ | -----    |  - |
|   width     | number      |  The width of the chart             |
|   height     | number       | The height of the chart           |
|    range (optional)    | number   | The range of the y-axis |
| data | { x: any, y : number }   | The data of the chart |
| color | string| The color of the line |

![Alt Text](https://raw.githubusercontent.com/KshitizSareen/react-native-build-charts/main/LineChart.png)

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