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

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

### Examples

#### Basic

```jsx
<HeatmapChart
  accountIds={[1]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
/>
```

#### With multiple accounts

```jsx
<HeatmapChart
  accountIds={[1, 1067061]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
/>
```

#### Fill container

```jsx
<HeatmapChart
  accountIds={[1]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
  fullWidth
  fullHeight
/>
```

#### With custom data

```jsx
function render() {
  const data = [
    {
      metadata: {
        id: "series-1",
        name: "Serie 1",
        viz: "main",
      },
      data: [
        {
          x0: 0,
          x1: 1,
          y: 221,
        },
        {
          x0: 1,
          x1: 2,
          y: 581,
        },
        {
          x0: 2,
          x1: 3,
          y: 1330,
        },
        {
          x0: 3,
          x1: 4,
          y: 2220,
        },
        {
          x0: 4,
          x1: 5,
          y: 1810,
        },
        {
          x0: 5,
          x1: 6,
          y: 1290,
        },
        {
          x0: 6,
          x1: 7,
          y: 895,
        },
        {
          x0: 7,
          x1: 8,
          y: 755,
        },
        {
          x0: 8,
          x1: 9,
          y: 460,
        },
        {
          x0: 9,
          x1: 310,
          y: 414,
        },
      ],
    },
    {
      metadata: {
        id: "series-2",
        name: "Serie 2",
        viz: "main",
      },
      data: [
        {
          x0: 0,
          x1: 1,
          y: 119,
        },
        {
          x0: 1,
          x1: 2,
          y: 1525,
        },
        {
          x0: 2,
          x1: 3,
          y: 1860,
        },
        {
          x0: 3,
          x1: 4,
          y: 2070,
        },
        {
          x0: 4,
          x1: 5,
          y: 1280,
        },
        {
          x0: 5,
          x1: 6,
          y: 1320,
        },
        {
          x0: 6,
          x1: 7,
          y: 888,
        },
        {
          x0: 7,
          x1: 8,
          y: 729,
        },
        {
          x0: 8,
          x1: 9,
          y: 432,
        },
        {
          x0: 9,
          x1: 310,
          y: 401,
        },
      ],
    },
  ];

  return <HeatmapChart 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',     },     data: [       {         x0: 0,         x1: 1,         y: 221,       },       {         x0: 1,         x1: 2,         y: 581,       },       {         x0: 2,         x1: 3,         y: 1330,       },       {         x0: 3,         x1: 4,         y: 2220,       },       {         x0: 4,         x1: 5,         y: 1810,       },       {         x0: 5,         x1: 6,         y: 1290,       },       {         x0: 6,         x1: 7,         y: 895,       },       {         x0: 7,         x1: 8,         y: 755,       },       {         x0: 8,         x1: 9,         y: 460,       },       {         x0: 9,         x1: 310,         y: 414,       },     ],   },   {     metadata: {       id: 'series-2',       name: 'Serie 2',       viz: 'main',     },     data: [       {         x0: 0,         x1: 1,         y: 119,       },       {         x0: 1,         x1: 2,         y: 1525,       },       {         x0: 2,         x1: 3,         y: 1860,       },       {         x0: 3,         x1: 4,         y: 2070,       },       {         x0: 4,         x1: 5,         y: 1280,       },       {         x0: 5,         x1: 6,         y: 1320,       },       {         x0: 6,         x1: 7,         y: 888,       },       {         x0: 7,         x1: 8,         y: 729,       },       {         x0: 8,         x1: 9,         y: 432,       },       {         x0: 9,         x1: 310,         y: 401,       },     ],   }, ]; ```  ```` |
| `fullHeight` boolean          | Expands the chart to occupy all available height.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| `fullWidth` boolean           | Expands the chart to occupy all available width.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `onClick` function            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `onClickHeatmap` function     | Adds a click listener that gets triggered when the user clicks over the corresponding heatmap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `onHoverHeatmap` function     | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding heatmap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `query` string                | NRQL query used for fetching data. The query is performed against the provided `accountIds`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `style` object                | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |