• /
  • Log in
  • Free account

SparklineChart

Creates a sparkline 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 { SparklineChart } from 'nr1'

Examples

Basic

ReferenceError: SparklineChart is not defined

Fill container

ReferenceError: SparklineChart 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
units_data: {
9
x: 'TIMESTAMP',
10
y: 'BYTES',
11
},
12
},
13
data: [
14
{
15
x: 1618083192778,
16
y: 21400,
17
},
18
{
19
x: 1618086792778,
20
y: 12200,
21
},
22
{
23
x: 1618090392778,
24
y: 9300,
25
},
26
{
27
x: 1618093992778,
28
y: 14500,
29
},
30
{
31
x: 1618097592778,
32
y: 27500,
33
},
34
{
35
x: 1618101192778,
36
y: 24700,
37
},
38
],
39
},
40
{
41
metadata: {
42
id: 'series-2',
43
name: 'Serie 2',
44
color: '#85c956',
45
viz: 'main',
46
units_data: {
47
x: 'TIMESTAMP',
48
y: 'BYTES',
49
},
50
},
51
data: [
52
{
53
x: 1618083192778,
54
y: 8800,
55
},
56
{
57
x: 1618086792778,
58
y: 1400,
59
},
60
{
61
x: 1618090392778,
62
y: 4600,
63
},
64
{
65
x: 1618093992778,
66
y: 5200,
67
},
68
{
69
x: 1618097592778,
70
y: 14100,
71
},
72
{
73
x: 1618101192778,
74
y: 19300,
75
},
76
],
77
},
78
{
79
metadata: {
80
id: 'events',
81
name: 'Events',
82
color: 'red',
83
viz: 'event',
84
},
85
data: [
86
{
87
x0: 1618086792778,
88
x1: 1618090392778,
89
},
90
{
91
x0: 1618097592778,
92
x1: 1618097592778,
93
},
94
],
95
},
96
];
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
onClickSparklinefunction

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

function () => undefined
onHoverEventfunction

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

function () => undefined
onHoverSparklinefunction

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

function () => undefined
querystring

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

styleobject

Inline style for custom styling.

Methods

SparklineChart.render

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