The Gravity charting library is built on chart.js. with a number of modifications so you can easily create beautiful, responsive charts in seconds.


  • type - line/bar/pie/donut/sparkline
  • legend - boolean to toggle the legend
  • data - API endpoint for the chart data
  • object - key to use in returned server JSON
  • color - accepts red/blue/purple/green (use an array for multiple datasets)
<Chart type='line'
  legend={ true }
  color={['red', 'blue']}

Chart Datasets

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.

Line Chart


Bar Chart

Pie Chart

Donut Chart