Gravity
Search…
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. 1.
    Line chart
  2. 2.
    Bar chart
  3. 3.
    Pie chart
However you can easily expand these with other chart types from the core library if you need more variety.
1
<Chart
2
title='Revenue'
3
type='line'
4
legend
5
data={ this.state.revenue }
6
xAxis
7
yAxis
8
legend
9
abbr
10
height={ 200 }
11
/>
Copied!

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:
1
labels: ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn'],
2
datasets: [{ label: 'Gravity', data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0] }]};
Copied!
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.
1
const labels = 'User';
2
const data = [
3
4
{ label: 'Owner', value: 7233 },
5
{ label: 'Admin', value: 321 },
6
{ label: 'User', value: 2101 }
7
8
];
9
10
return chart.create(data, labels);
Copied!
Last modified 1yr ago
Copy link