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

import { HistogramChart } from 'nr1'

Examples

Basic

<HistogramChart
  accountId={1}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago"
/>;

1
<HistogramChart
2
  accountId={1}
3
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago"
4
/>;

ReferenceError: HistogramChart is not defined

Fill container

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

1
<HistogramChart
2
  accountId={1}
3
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago"
4
  fullWidth
5
  fullHeight
6
/>;

ReferenceError: HistogramChart is not defined

With custom data

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 />;
}

1
function render() {
2
  const data = [
3
    {
4
      metadata: {
5
        id: 'series-1',
6
        name: 'Serie 1',
7
        color: '#a35ebf',
8
        viz: 'main',
9
      },
10
      data: [
11
        {
12
          x0: 0,
13
          x1: 1,
14
          y: 221,
15
        },
16
        {
17
          x0: 1,
18
          x1: 2,
19
          y: 581,
20
        },
21
        {
22
          x0: 2,
23
          x1: 3,
24
          y: 1330,
25
        },
26
        {
27
          x0: 3,
28
          x1: 4,
29
          y: 2220,
30
        },
31
        {
32
          x0: 4,
33
          x1: 5,
34
          y: 1810,
35
        },
36
        {
37
          x0: 5,
38
          x1: 6,
39
          y: 1290,
40
        },
41
        {
42
          x0: 6,
43
          x1: 7,
44
          y: 895,
45
        },
46
        {
47
          x0: 7,
48
          x1: 8,
49
          y: 755,
50
        },
51
        {
52
          x0: 8,
53
          x1: 9,
54
          y: 460,
55
        },
56
        {
57
          x0: 9,
58
          x1: 310,
59
          y: 414,
60
        },
61
      ],
62
    },
63
  ];
64
65
  return <HistogramChart data={data} fullWidth />;
66
}

Props

accountIdnumber

Sets the account ID to perform the query.

classNamestring

Appends class names to the component.

dataobject[]

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.

Example 1

1
const data = [
2
  {
3
    metadata: {
4
      id: 'series-1',
5
      name: 'Serie 1',
6
      color: '#a35ebf',
7
      viz: 'main',
8
    },
9
    data: [
10
      {
11
        x0: 0,
12
        x1: 1,
13
        y: 221,
14
      },
15
      {
16
        x0: 1,
17
        x1: 2,
18
        y: 581,
19
      },
20
      {
21
        x0: 2,
22
        x1: 3,
23
        y: 1330,
24
      },
25
      {
26
        x0: 3,
27
        x1: 4,
28
        y: 2220,
29
      },
30
      {
31
        x0: 4,
32
        x1: 5,
33
        y: 1810,
34
      },
35
      {
36
        x0: 5,
37
        x1: 6,
38
        y: 1290,
39
      },
40
      {
41
        x0: 6,
42
        x1: 7,
43
        y: 895,
44
      },
45
      {
46
        x0: 7,
47
        x1: 8,
48
        y: 755,
49
      },
50
      {
51
        x0: 8,
52
        x1: 9,
53
        y: 460,
54
      },
55
      {
56
        x0: 9,
57
        x1: 310,
58
        y: 414,
59
      },
60
    ],
61
  },
62
];

fullHeightboolean

DEFAULT

false

Expands the chart to occupy all available height.

fullWidthboolean

DEFAULT

false

Expands the chart to occupy all available width.

onClickEventfunction

Adds a click listener that gets triggered when the user clicks over the corresponding event.

function () => undefined

onClickHistogramfunction

Adds a click listener that gets triggered when the user clicks over the corresponding histogram.

function () => undefined

onHoverEventfunction

Adds a hover listener that gets triggered when the cursor is hovered over the corresponding event.

function () => undefined

onHoverHistogramfunction

Adds a hover listener that gets triggered when the cursor is hovered over the corresponding histogram.

function () => undefined

querystring

NRQL query used for fetching data. The query is performed against the provided accountId.

styleobject

Inline style for custom styling.

Methods

`HistogramChart.render`

function () => undefined