• /
  • Log in
  • Free account

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

import { HeatmapChart } from 'nr1'

Examples

Basic

ReferenceError: HeatmapChart is not defined

Fill container

ReferenceError: HeatmapChart 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
viz: 'main',
7
},
8
data: [
9
{
10
x0: 0,
11
x1: 1,
12
y: 221,
13
},
14
{
15
x0: 1,
16
x1: 2,
17
y: 581,
18
},
19
{
20
x0: 2,
21
x1: 3,
22
y: 1330,
23
},
24
{
25
x0: 3,
26
x1: 4,
27
y: 2220,
28
},
29
{
30
x0: 4,
31
x1: 5,
32
y: 1810,
33
},
34
{
35
x0: 5,
36
x1: 6,
37
y: 1290,
38
},
39
{
40
x0: 6,
41
x1: 7,
42
y: 895,
43
},
44
{
45
x0: 7,
46
x1: 8,
47
y: 755,
48
},
49
{
50
x0: 8,
51
x1: 9,
52
y: 460,
53
},
54
{
55
x0: 9,
56
x1: 310,
57
y: 414,
58
},
59
],
60
},
61
{
62
metadata: {
63
id: 'series-2',
64
name: 'Serie 2',
65
viz: 'main',
66
},
67
data: [
68
{
69
x0: 0,
70
x1: 1,
71
y: 119,
72
},
73
{
74
x0: 1,
75
x1: 2,
76
y: 1525,
77
},
78
{
79
x0: 2,
80
x1: 3,
81
y: 1860,
82
},
83
{
84
x0: 3,
85
x1: 4,
86
y: 2070,
87
},
88
{
89
x0: 4,
90
x1: 5,
91
y: 1280,
92
},
93
{
94
x0: 5,
95
x1: 6,
96
y: 1320,
97
},
98
{
99
x0: 6,
100
x1: 7,
101
y: 888,
102
},
103
{
104
x0: 7,
105
x1: 8,
106
y: 729,
107
},
108
{
109
x0: 8,
110
x1: 9,
111
y: 432,
112
},
113
{
114
x0: 9,
115
x1: 310,
116
y: 401,
117
},
118
],
119
},
120
];
fullHeightboolean
DEFAULT
false

Expands the chart to occupy all available height.

fullWidthboolean
DEFAULT
false

Expands the chart to occupy all available width.

onClickHeatmapfunction

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

function () => undefined
onHoverHeatmapfunction

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

function () => undefined
querystring

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

styleobject

Inline style for custom styling.

Methods

HeatmapChart.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.