• /
  • Log in
  • Free account

PieChart

Creates a pie 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 { PieChart } from 'nr1'

Examples

Basic

ReferenceError: PieChart is not defined

Fill container

ReferenceError: PieChart 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
y: 'BYTES',
10
},
11
},
12
data: [{ y: 128 }],
13
},
14
{
15
metadata: {
16
id: 'series-2',
17
name: 'Serie 2',
18
color: '#85c956',
19
viz: 'main',
20
units_data: {
21
y: 'BYTES',
22
},
23
},
24
data: [{ y: 256 }],
25
},
26
{
27
metadata: {
28
id: 'series-3',
29
name: 'Serie 3',
30
color: '#f86e40',
31
viz: 'main',
32
units_data: {
33
y: 'BYTES',
34
},
35
},
36
data: [{ y: 300 }],
37
},
38
{
39
metadata: {
40
id: 'series-4',
41
name: 'Serie 4',
42
color: '#c21684',
43
viz: 'main',
44
units_data: {
45
y: 'BYTES',
46
},
47
},
48
data: [{ y: 450 }],
49
},
50
{
51
metadata: {
52
id: 'series-5',
53
name: 'Serie 5',
54
color: '#51c9b7',
55
viz: 'main',
56
units_data: {
57
y: 'BYTES',
58
},
59
},
60
data: [{ y: 170 }],
61
},
62
{
63
metadata: {
64
id: 'series-6',
65
name: 'Serie 6',
66
color: '#48d2f0',
67
viz: 'main',
68
units_data: {
69
y: 'BYTES',
70
},
71
},
72
data: [{ y: 200 }],
73
},
74
];
fullHeightboolean
DEFAULT
false

Expands the chart to occupy all available height.

fullWidthboolean
DEFAULT
false

Expands the chart to occupy all available width.

onClickPiefunction

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

function () => undefined
onHoverPiefunction

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

function () => undefined
querystring

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

styleobject

Inline style for custom styling.

Methods

PieChart.render

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