---
title: AreaChart
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/charts/AreaChart
---
Creates a area chart. Data can either be obtained by performing a NRQL query against a particular account, or it can be passed through the `data` prop.
The `data` format is a series of objects, each containing `metadata` and `data`. Each `data` contains both values from this point, and `x` and `y` keys used to plot the chart.
### Usage
```js
import { AreaChart } from 'nr1'
```
### Examples
#### Basic
```jsx
```
#### With multiple accounts
```jsx
```
#### Fill container
```jsx
```
#### With custom data
```jsx
function render() {
const data = [
{
metadata: {
id: 'series-1',
name: 'Serie 1',
color: '#a35ebf',
viz: 'main',
units_data: {
x: 'TIMESTAMP',
y: 'BYTES',
}
},
data: [
{
x: 1717070785286,
y: 21400,
},
{
x: 1717074385286,
y: 12200,
},
{
x: 1717077985286,
y: 9300,
},
{
x: 1717081585286,
y: 14500,
},
{
x: 1717085185286,
y: 27500,
},
{
x: 1717088785286,
y: 24700,
},
],
},
{
metadata: {
id: 'series-2',
name: 'Serie 2',
color: '#85c956',
viz: 'main',
units_data: {
x: 'TIMESTAMP',
y: 'BYTES',
}
},
data: [
{
x: 1717070785286,
y: 8800,
},
{
x: 1717074385286,
y: 1400,
},
{
x: 1717077985286,
y: 4600,
},
{
x: 1717081585286,
y: 5200,
},
{
x: 1717085185286,
y: 14100,
},
{
x: 1717088785286,
y: 19300,
},
],
},
{
metadata: {
id: 'events',
name: 'Events',
color: 'red',
viz: 'event',
},
data: [
{
x0: 1717074385286,
x1: 1717077985286,
},
{
x0: 1717085185286,
x1: 1717085185286,
},
],
},
];
return ;
}
```
### Props
| `accountId` DEPRECATED number | > #### ⚠️ DUE NOVEMBER 1ST, 2022 > > The `accountId` is deprecated, use `accountIds` instead Sets the account ID to perform the query. |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `accountIds` number\[] | Sets the account IDs to perform the query. |
| `className` string | Appends class names to the component. |
| `data` object\[] | Data is an array of objects where each object represents a series to be drawn. Each series comprises visualization metadata and an array of data points. ````js const data = [ { metadata: { id: 'series-1', name: 'Serie 1', color: '#a35ebf', viz: 'main', units_data: { x: 'TIMESTAMP', y: 'BYTES', }, }, data: [ { x: 1712312066891, y: 21400, }, { x: 1712315666891, y: 12200, }, { x: 1712319266891, y: 9300, }, { x: 1712322866891, y: 14500, }, { x: 1712326466891, y: 27500, }, { x: 1712330066891, y: 24700, }, ], }, { metadata: { id: 'series-2', name: 'Serie 2', color: '#85c956', viz: 'main', units_data: { x: 'TIMESTAMP', y: 'BYTES', }, }, data: [ { x: 1712312066891, y: 8800, }, { x: 1712315666891, y: 1400, }, { x: 1712319266891, y: 4600, }, { x: 1712322866891, y: 5200, }, { x: 1712326466891, y: 14100, }, { x: 1712330066891, y: 19300, }, ], }, { metadata: { id: 'events', name: 'Events', color: 'red', viz: 'event', }, data: [ { x0: 1712315666891, x1: 1712319266891, }, { x0: 1712326466891, x1: 1712326466891, }, ], }, ]; ``` ```` |
| `fullHeight`boolean | Expands the chart to occupy all available height. |
| `fullWidth`boolean | Expands the chart to occupy all available width. |
| `onClick`function | |
| `onClickArea`function | Adds a click listener that gets triggered when the user clicks over the corresponding area. |
| `onClickEvent`function | Adds a click listener that gets triggered when the user clicks over the corresponding event. |
| `onClickLine`function | Adds a click listener that gets triggered when the user clicks over the corresponding line. |
| `onHoverArea`function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding area. |
| `onHoverEvent`function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding event. |
| `onHoverLine`function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding line. |
| `query`string | NRQL query used for fetching data. The query is performed against the provided `accountIds`. |
| `style`object | Inline style for custom styling. |