# 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="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FE6dgcvBM8YilXj1BUMu2%2Fchart.png?alt=media&#x26;token=54331257-8be0-407a-904c-fe6e9663027c" 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](#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/).