• /
  • Log in
  • Free account

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

ReferenceError: HistogramChart is not defined

Fill container

ReferenceError: HistogramChart is not defined

With custom data

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
Create issueEdit page
Copyright © 2021 New Relic Inc.