Gravity
Search…
Chart
The Gravity Web charting library is built on chart.js with a number of modifications so you can easily create beautiful, responsive charts in seconds.
1
<Chart
2
type='line'
3
legend
4
data={ dataObject }
5
color={['red', 'blue']}
6
/>
Copied!

Props

prop
description
value
type
type of chart to display
line, bar, pie, donut or sparkline
legend
show or hide the legend
true or false
data
object containing chart data
object (see below)
color
color of the chart element (use array for multiple datasets)
red, blue, green, purple or string array

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.
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