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
Sets the account ID to perform the query.
Appends class names to the component.
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
1const 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];
false
Expands the chart to occupy all available height.
false
Expands the chart to occupy all available width.
Adds a click listener that gets triggered when the user clicks over the corresponding event.
function () => undefined
Adds a click listener that gets triggered when the user clicks over the corresponding histogram.
function () => undefined
Adds a hover listener that gets triggered when the cursor is hovered over the corresponding event.
function () => undefined
Adds a hover listener that gets triggered when the cursor is hovered over the corresponding histogram.
function () => undefined
NRQL query used for fetching data. The query is performed against the
provided accountId
.
Inline style for custom styling.
Methods
HistogramChart.render
function () => undefined