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.

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

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:

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