---
title: TableChart
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/charts/TableChart
---
Creates a table 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 { TableChart } 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: "#008c99",
viz: "main",
columns: ["jobType", "count"],
},
data: [
{
jobType: "SIMPLE",
count: 18,
},
{
jobType: "SCRIPT_BROWSER",
count: 27,
},
{
jobType: "SCRIPT_API",
count: 33,
},
{
jobType: "BROWSER",
count: 29,
},
{
jobType: "SELENIUM_JSON",
count: 22,
},
{
jobType: "SCRIPT",
count: 31,
},
],
},
];
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: '#008c99', viz: 'main', columns: ['jobType', 'count'], }, data: [ { jobType: 'SIMPLE', count: 18, }, { jobType: 'SCRIPT_BROWSER', count: 27, }, { jobType: 'SCRIPT_API', count: 33, }, { jobType: 'BROWSER', count: 29, }, { jobType: 'SELENIUM_JSON', count: 22, }, { jobType: 'SCRIPT', count: 31, }, ], }, ]; ``` ```` |
| `fullHeight` boolean | Expands the chart to occupy all available height. |
| `fullWidth` boolean | Expands the chart to occupy all available width. |
| `onClickTable` function | Adds a click listener that gets triggered when the user clicks over the corresponding table. |
| `onHoverTable` function | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding table. |
| `query` string | NRQL query used for fetching data. The query is performed against the provided `accountIds`. |
| `style` object | Inline style for custom styling. |