# Chart

The `Chart` component is a responsive chart that supports multiple datasets and chart types. It leverages the [chart.js](https://www.chartjs.org/) library for rendering various types of charts.

## Preview

<div align="left"><figure><img src="/files/oo20aVESkWwFS25jonqZ" alt="Gravity chart component" width="563"><figcaption></figcaption></figure></div>

### Usage

```javascript
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 | [object](/gravity-web/components/chart.md#data-format) (see below) |
| 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:

```javascript
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.&#x20;

```javascript
const labels = 'User';
const data = [
  { label: 'Owner', value: 7233 },
  { label: 'Admin', value: 321 },
  { label: 'User', value: 2101 }
];

return chart.create(data, labels);
```

### Usage

```javascript
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.
* For more details, refer to the [Chart.js documentation](https://www.chartjs.org/).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.