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:
Line chart
Bar chart
Pie chart
You can easily expand these with other chart types from the core library if you need more variety.
Code
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:
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.
Last updated