---
title: ScatterChart
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/charts/ScatterChart
---
Creates a scatter 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
```jsx
import { ScatterChart } 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 | |
| `onClickEvent` function | Adds a click listener that gets triggered when the user clicks over the corresponding event. |
| `onClickScatter` function | Adds a click listener that gets triggered when the user clicks over the corresponding scatter. |
| `onHoverEvent` function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding event. |
| `onHoverScatter` function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding scatter. |
| `query` string | NRQL query used for fetching data. The query is performed against the provided `accountIds`. |
| `style` object | Inline style for custom styling. |