HistogramChart

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

<HistogramChart accountIds={[1]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago" />

With multiple accounts

<HistogramChart accountIds={[1, 1067061]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago" />

Fill container

<HistogramChart
  accountIds={[1]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago"
  fullWidth
  fullHeight
/>

With custom data

function render() {
  const data = [
     {
       metadata: {
         id: 'series-1',
         name: 'Serie 1',
         color: '#a35ebf',
         viz: 'main',
       },
       data: [
         {
           x0: 0,
           x1: 1,
           y: 221,
         },
         {
           x0: 1,
           x1: 2,
           y: 581,
         },
         {
           x0: 2,
           x1: 3,
           y: 1330,
         },
         {
           x0: 3,
           x1: 4,
           y: 2220,
         },
         {
           x0: 4,
           x1: 5,
           y: 1810,
         },
         {
           x0: 5,
           x1: 6,
           y: 1290,
         },
         {
           x0: 6,
           x1: 7,
           y: 895,
         },
         {
           x0: 7,
           x1: 8,
           y: 755,
         },
         {
           x0: 8,
           x1: 9,
           y: 460,
         },
         {
           x0: 9,
           x1: 310,
           y: 414,
         },
       ],
     },
   ];;


  return <HistogramChart data={data} fullWidth />;
}

Props

accountId

DEPRECATED

number

Due November 1st, 2022

The accountId is deprecated, use accountIds instead

Sets the account ID to perform the query.

accountIds

number[]

Sets the account IDs to perform the query.

className

string

Appends class names to the component.

data

object[]

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.

const data = [
  {
    metadata: {
      id: 'series-1',
      name: 'Serie 1',
      color: '#a35ebf',
      viz: 'main',
    },
    data: [
      {
        x0: 0,
        x1: 1,
        y: 221,
      },
      {
        x0: 1,
        x1: 2,
        y: 581,
      },
      {
        x0: 2,
        x1: 3,
        y: 1330,
      },
      {
        x0: 3,
        x1: 4,
        y: 2220,
      },
      {
        x0: 4,
        x1: 5,
        y: 1810,
      },
      {
        x0: 5,
        x1: 6,
        y: 1290,
      },
      {
        x0: 6,
        x1: 7,
        y: 895,
      },
      {
        x0: 7,
        x1: 8,
        y: 755,
      },
      {
        x0: 8,
        x1: 9,
        y: 460,
      },
      {
        x0: 9,
        x1: 310,
        y: 414,
      },
    ],
  },
];

fullHeight

boolean

Expands the chart to occupy all available height.

fullWidth

boolean

Expands the chart to occupy all available width.

onClick

function

onClickEvent

function

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

onClickHistogram

function

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

onHoverEvent

function

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

onHoverHistogram

function

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

query

string

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

style

object

Inline style for custom styling.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With multiple accounts

Fill container

With custom data

Props

DEPRECATED

number

Due November 1st, 2022

number[]

string

object[]

boolean

boolean

function

function

function

function

function

string

object

Usage