# Chart

Gravity Native charts are built on [React Native SVG Charts](https://github.com/JesperLekland/react-native-svg-charts) with several modifications, so you can easily create beautiful charts in seconds. 

## Preview

<div align="left"><figure><img src="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FP9VBCKvLkqSZrgLLTaW5%2Fchart.png?alt=media&#x26;token=4311605b-7388-45a3-8ae9-6e421f40431a" alt="" width="375"><figcaption></figcaption></figure></div>

There are three chart types available:

1. Line chart
2. Bar chart
3. Pie chart

You can easily expand these with other chart types from the [core library](https://github.com/JesperLekland/react-native-svg-charts) if you need more variety.&#x20;

## Code

```javascript
<Chart 
  title='Revenue'
  type='line'
  legend
  data={ this.state.revenue }
  xAxis
  yAxis
  legend
  abbr
  height={ 200 } 
/>
```

## Props

| Prop    | Description                     | Required | Value                              |
| ------- | ------------------------------- | -------- | ---------------------------------- |
| abbr    | abbreviate the values in labels | optional | boolean                            |
| color   | color of the chart              | optional | red, blue (default), green, purple |
| data    | formatted chart object          | required | [object](#data-format) (see below) |
| height  | chart height                    | required | integer *(default: 200)*           |
| legend  | show the legend                 | optional | boolean                            |
| loading | toggle the loading spinner      | optional | boolean                            |
| title   | chart title                     | required | string                             |
| type    | type of chart to display        | required | line, bar, pie                     |
| xAxis   | show or hide the x axis         | optional | boolean                            |
| yAxis   | show or hide the y axis         | optional | boolean                            |

## Data Format

Chart data should be in the following format:

```javascript
labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn'],
datasets: [{ label: 'Gravity', data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0] }]};
```

You can pass multiple datasets to a line or bar chart by adding to the datasets array.

There is a `chart.create` method located inside the `/model` directory on the server that you can use to easily format chart data. Gravity Native will convert this format into the required format for React Native Charts so you can use one format for both Gravity Web and Gravity Native.

```javascript
  const labels = 'User';
  const data = [

    { label: 'Owner', value: 7233 },
    { label: 'Admin', value: 321 },
    { label: 'User', value: 2101 }

  ];

  return chart.create(data, labels);
```