• /
  • EnglishEspañolFrançais日本語한국어Português
  • Log inStart now

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

<SparklineChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>;

With multiple accounts

<SparklineChart
  accountIds={[1, 1067061]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
/>;

Fill container

<SparklineChart
  accountIds={[1]}
  query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType"
  fullWidth
  fullHeight
/>;

With custom data

function render() {
  const data = [
    {
      metadata: {
        id: 'series-1',
        name: 'Serie 1',
        color: '#a35ebf',
        viz: 'main',
        units_data: {
          x: 'TIMESTAMP',
          y: 'BYTES',
        },
      },
      data: [
        {
          x: 1717070785286,
          y: 21400,
        },
        {
          x: 1717074385286,
          y: 12200,
        },
        {
          x: 1717077985286,
          y: 9300,
        },
        {
          x: 1717081585286,
          y: 14500,
        },
        {
          x: 1717085185286,
          y: 27500,
        },
        {
          x: 1717088785286,
          y: 24700,
        },
      ],
    },
    {
      metadata: {
        id: 'series-2',
        name: 'Serie 2',
        color: '#85c956',
        viz: 'main',
        units_data: {
          x: 'TIMESTAMP',
          y: 'BYTES',
        },
      },
      data: [
        {
          x: 1717070785286,
          y: 8800,
        },
        {
          x: 1717074385286,
          y: 1400,
        },
        {
          x: 1717077985286,
          y: 4600,
        },
        {
          x: 1717081585286,
          y: 5200,
        },
        {
          x: 1717085185286,
          y: 14100,
        },
        {
          x: 1717088785286,
          y: 19300,
        },
      ],
    },
    {
      metadata: {
        id: 'events',
        name: 'Events',
        color: 'red',
        viz: 'event',
      },
      data: [
        {
          x0: 1717074385286,
          x1: 1717077985286,
        },
        {
          x0: 1717085185286,
          x1: 1717085185286,
        },
      ],
    },
  ];


  return <SparklineChart 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',
      units_data: {
        x: 'TIMESTAMP',
        y: 'BYTES',
      },
    },
    data: [
      {
        x: 1712312066891,
        y: 21400,
      },
      {
        x: 1712315666891,
        y: 12200,
      },
      {
        x: 1712319266891,
        y: 9300,
      },
      {
        x: 1712322866891,
        y: 14500,
      },
      {
        x: 1712326466891,
        y: 27500,
      },
      {
        x: 1712330066891,
        y: 24700,
      },
    ],
  },
  {
    metadata: {
      id: 'series-2',
      name: 'Serie 2',
      color: '#85c956',
      viz: 'main',
      units_data: {
        x: 'TIMESTAMP',
        y: 'BYTES',
      },
    },
    data: [
      {
        x: 1712312066891,
        y: 8800,
      },
      {
        x: 1712315666891,
        y: 1400,
      },
      {
        x: 1712319266891,
        y: 4600,
      },
      {
        x: 1712322866891,
        y: 5200,
      },
      {
        x: 1712326466891,
        y: 14100,
      },
      {
        x: 1712330066891,
        y: 19300,
      },
    ],
  },
  {
    metadata: {
      id: 'events',
      name: 'Events',
      color: 'red',
      viz: 'event',
    },
    data: [
      {
        x0: 1712315666891,
        x1: 1712319266891,
      },
      {
        x0: 1712326466891,
        x1: 1712326466891,
      },
    ],
  },
];

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.

onClickSparkline

function

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

onHoverEvent

function

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

onHoverSparkline

function

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

query

string

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

style

object

Inline style for custom styling.

Copyright © 2025 New Relic Inc.
CareersTerms of ServiceDMCA PolicyPrivacy NoticeCookie PolicyUK Slavery Act

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.