• /
  • Log in
  • Free account

BillboardChart

Creates a billboard 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 { BillboardChart } from 'nr1'

Examples

Basic

ReferenceError: BillboardChart is not defined

Fill container

ReferenceError: BillboardChart 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
units_data: {
8
y: 'MS',
9
},
10
},
11
data: [
12
{ y: 0.128 }, // Previous value.
13
{ y: 0.069 }, // Current value.
14
],
15
},
16
{
17
metadata: {
18
id: 'series-2',
19
name: 'Serie 2',
20
viz: 'main',
21
units_data: {
22
y: 'BYTES_PER_MS',
23
},
24
},
25
data: [{ y: 67 }, { y: 128 }],
26
},
27
{
28
metadata: {
29
id: 'series-3',
30
name: 'Serie 3',
31
viz: 'main',
32
units_data: {
33
y: 'COUNT',
34
},
35
},
36
data: [{ y: 3203423 }, { y: 5202142 }],
37
},
38
];
fullHeightboolean
DEFAULT
false

Expands the chart to occupy all available height.

fullWidthboolean
DEFAULT
false

Expands the chart to occupy all available width.

onClickBillboardfunction

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

function () => undefined
onHoverBillboardfunction

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

function () => undefined
querystring

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

styleobject

Inline style for custom styling.

Methods

BillboardChart.render

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