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