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']}
/>
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 |
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 2yr ago