Gravity
Search
K

Chart

The Gravity Web charting library is built with chart.js so you can easily create beautiful, responsive charts in seconds.

Preview

Code

<Chart
type='line'
legend
data={ dataObject }
color={['red', 'blue']}
/>

Props

Prop
Description
Required
Value
color
line color (use array for multiple datasets)
required
red, blue, green, purple or string array
data
object containing chart data
required
object (see below)
legend
show the legend
optional
boolean
type
type of chart to display
required
line, bar, pie, donut or sparkline

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.
const labels = 'User';
const data = [
{ label: 'Owner', value: 7233 },
{ label: 'Admin', value: 321 },
{ label: 'User', value: 2101 }
];
return chart.create(data, labels);
Last modified 1d ago