Chart
The Gravity Web charting library is built with chart.js so you can easily create beautiful, responsive charts in seconds.
<Chart
type='line'
legend
data={ dataObject }
color={['red', 'blue']}
/>
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 | |
legend | show the legend | optional | boolean |
type | type of chart to display | required | line, bar, pie, donut or sparkline |
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