---
title: BillboardChart
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/charts/BillboardChart
---

Creates a billboard 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 { BillboardChart } from 'nr1'
```

### Examples

#### Basic

```jsx
<BillboardChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>
```

#### With multiple accounts

```jsx
<BillboardChart
  accountIds={[1, 1067061]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>
```

#### Fill container

```jsx
<BillboardChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
  fullWidth
  fullHeight
/>
```

#### With custom data

```jsx
function render() {
  const data = [
    {
      metadata: {
        id: "series-1",
        name: "Serie 1",
        viz: "main",
        units_data: {
          y: "MS",
        },
      },
      data: [
        { y: 0.128 }, // Previous value.
        { y: 0.069 }, // Current value.
      ],
    },
    {
      metadata: {
        id: "series-2",
        name: "Serie 2",
        viz: "main",
        units_data: {
          y: "BYTES_PER_MS",
        },
      },
      data: [
        { y: 67 }, 
        { y: 128 }
      ],
    },
    {
      metadata: {
        id: "series-3",
        name: "Serie 3",
        viz: "main",
        units_data: {
          y: "COUNT",
        },
      },
      data: [
        { y: 3203423 }, 
        { y: 5202142 }
      ],
    },
  ];

  return <BillboardChart data={data} fullWidth />;
}
```

### 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',       viz: 'main',       units_data: {         y: 'MS',       },     },     data: [       { y: 0.128 }, // Previous value.       { y: 0.069 }, // Current value.     ],   },   {     metadata: {       id: 'series-2',       name: 'Serie 2',       viz: 'main',       units_data: {         y: 'BYTES_PER_MS',       },     },     data: [{ y: 67 }, { y: 128 }],   },   {     metadata: {       id: 'series-3',       name: 'Serie 3',       viz: 'main',       units_data: {         y: 'COUNT',       },     },     data: [{ y: 3203423 }, { y: 5202142 }],   }, ]; ```  ```` |
| `fullHeight` boolean          | Expands the chart to occupy all available height.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `fullWidth` boolean           | Expands the chart to occupy all available width.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `onClickBillboard` function   | Adds a click listener that gets triggered when the user clicks over the corresponding billboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `onHoverBillboard` function   | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding billboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `query` string                | NRQL query used for fetching data. The query is performed against the provided `accountIds`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `style` object                | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |