Gravity
  • Welcome to Gravity
  • Getting Started
  • Stack
  • Updates
  • Rules For AI
  • Troubleshooting
  • Gravity Server
    • Introduction
    • Installation
      • Install Node.js
      • Database Setup
      • Stripe Setup
      • Mailgun Setup
      • Install Gravity
    • Application Structure
    • REST API
      • API Scopes
      • Webhooks
    • Authentication
      • Email Verification
      • Social Sign On
      • Two-Factor Authentication
    • Authorization
      • Feature Access and Plan Restrictions
      • Permissions (Roles)
    • Config
    • Environment Variables
    • Database Queries
    • Handling Errors
    • Logging
    • Localization
    • Push Notifications
    • Email Notifications
    • User Feedback
    • User Onboarding
    • File Uploads
    • Billing
      • Seat Billing
      • Usage Billing
    • Free Accounts
    • CLI Toolbelt
    • Testing
    • AI Tools
    • Background Jobs
    • Deployment
  • Gravity Web
    • Introduction
    • Tailwind & SCSS
    • Routing
    • Events
    • Authentication
    • Localization
    • Hooks
      • useAPI
      • usePlans
      • usePermissions
    • Components
      • Alert
      • Animate
      • Avatar
      • Badge
      • Breadcrumb
      • Button
      • Calendar
      • Card
      • Chart
      • Checklist
      • Credit Card
      • Detail
      • Dialog
      • Dropdown
      • Feedback
      • Form
      • Grid
      • Header
      • Helper
      • Icon
      • Image
      • Layout
      • Link
      • List
      • Loader
      • Logo
      • Nav
      • Onboarding
      • Pagination
      • Popover
      • Progress
      • Row
      • Search
      • Separator
      • Sheet
      • Social
      • Stat
      • Table
      • Tabs
      • Toast (Notification)
      • Tooltip
      • User
      • View
    • Views
    • Handling Errors
    • Deployment
  • Gravity Native
    • Introduction
    • Prerequisites
    • Installation
    • App Context
    • Authentication
    • Localisation
    • External Linking
    • Handling Errors
    • Navigation
    • Config
    • Events
    • Views
    • Components
      • Badge
      • Blankslate
      • Button
      • Card
      • Chart
      • Form
      • Global
      • Grid
      • Icon
      • List
      • Logo
      • Message
      • Modal
      • Nav
      • Notification
      • Progress Bar
      • Search
      • Separator
      • Social
      • Stat
      • View
    • Push Notifications
    • Payments
    • Building Your App
  • Mission Control
    • Introduction
    • Installation
    • User Management
    • Feedback
    • Events
    • Logs
  • Website Template
    • Introduction
    • Environment Variables
    • Styling
    • Components
      • Article
      • Feature List
      • Footer
      • Hero
      • Layout
      • Pricing
      • Meta Data
      • Nav
      • Testimonial
    • Build and Deploy
Powered by GitBook
On this page
  • Preview
  • Usage
  • Data Format
  • Usage
  • Notes

Was this helpful?

  1. Gravity Web
  2. Components

Chart

PreviousCardNextChecklist

Last updated 10 months ago

Was this helpful?

The Chart component is a responsive chart that supports multiple datasets and chart types. It leverages the library for rendering various types of charts.

Preview

Usage

import { Chart } from 'components/lib';

function MyComponent({ ...props }){

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30, 40, 50],
    }],
  };

  return (
    <Chart 
      type='line'
      data={ data }
      color='blue'
      showLegend
    />
  );
}

Prop
Description
Required
Value

color

line color (use array for multiple datasets)

required

string (red/blue/purple/green)

data

chart data

required

loading

toggle the loading spinner

optional

boolean

showLegend

toggle the legend

optional

boolean

type

type of chart to display

required

string (line/bar/pie/donut/sparkline), default: line

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

Usage

import { Chart } from 'components/lib';

function Example({ ...props }){

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [{
      label: 'Dataset 1',
      data: [10, 20, 30, 40, 50],
    }],
  };

  return (
    <div>
      <Chart 
        type='line'
        data={ data }
        color='blue'
        showLegend={ true }
      />

      <Chart 
        type='donut'
        data={ data }
        color='red'
        showLegend={ false }
      />
    </div>
  );
}

Notes

  • The Chart component uses LineChart, BarChart, PieChart, DonutChart, and SparkLineChart components for different chart types.

  • The color prop specifies the color for the chart lines.

  • The data prop provides the data for the chart in the format { labels: [], datasets: [{ label: string, data: [] }] }.

  • The showLegend prop toggles the legend display.

  • The loading prop toggles a loading spinner.

(see below)

For more details, refer to the .

Chart.js documentation
object
chart.js
Gravity chart component