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

Creates a histogram 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.

If you want to display a histogram with multiple series, consider using `HeatmapChart`.

### Usage

```jsx
import { HistogramChart } from 'nr1'
```

### Examples

#### Basic

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

#### With multiple accounts

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

#### Fill container

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

#### With custom data

```jsx
function render() {
  const data = [
    {
      metadata: {
        id: "series-1",
        name: "Serie 1",
        color: "#a35ebf",
        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,
        },
      ],
    },
  ];

  return <HistogramChart 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',       color: '#a35ebf',       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,       },     ],   }, ]; ```  ```` |
| `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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `onClickHistogram` function   | Adds a click listener that gets triggered when the user clicks over the corresponding histogram.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `onHoverEvent` function       | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding event.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `onHoverHistogram` function   | Adds a hover listener that gets triggered when the cursor is hovered over the corresponding histogram.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `query` string                | NRQL query used for fetching data. The query is performed against the provided `accountIds`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `style` object                | Inline style for custom styling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |