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

PropDescriptionRequiredValue

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

Last updated