Chart

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

Preview

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 if you need more variety.

Code

<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 (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:

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);