Chart

Gravity Native charts are built on React Native SVG Charts with a number of modifications so you can easily create beautiful charts in seconds.

There are three chart types available:

  1. Line chart

  2. Bar chart

  3. Pie chart

However you can easily expand these with other chart types from the core library if you need more variety.

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

Props

prop

description

value

type

type of chart to display

line, bar, pie

title

chart title

string

legend

show or hide the legend

true or false

data

formatted chart object

object (see below)

color

color of the chart

red, blue, green, purple

abbr

optimise screen space with abbreviated y axis labels

true or false

xAxis

show or hide the x axis

true or false

yAxis

show or hide the y axis

true or false

height

height of the chart

integer (default is 200)

loading

toggle a loading spinner

true or false

Data Format

Chart data should be in the following format:

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.

const labels = 'User';
const data = [
{ label: 'Owner', value: 7233 },
{ label: 'Admin', value: 321 },
{ label: 'User', value: 2101 }
];
return chart.create(data, labels);