Sparkline

The Sparkline is a compact and simple data visualization that displays a trend or pattern of data in a small, condensed format. It typically consists of a single line or area graph, without axes or labels, that represents the variation of data points over time.

OverviewProperties

Import

import { Sparkline } from '@dynatrace/strato-components-preview/charts';

Use cases

The Sparkline component requires data of type Timeseries or Timeseries[] to be passed to the data prop. If more than one series is provided, the first one is used. The data points within the series need to provide a time dimension as well as a numerical value.

You can further customise the Sparkline by setting its color prop to any of the Design System ColorPalette.

The Sparkline is able to show the default loading indicator setting the loading prop to true.

Lastly, x-axis ticks can be visualized on the Sparkline by using the showTicks prop. By default, these ticks are hidden.

Variants

The Sparkline has three variants and can be displayed as a line (default), area, or bar. It is important to note that not all features and props apply to all variants equally, for example curve has no effect in bar variant, and scale has effect only in bar variant

CodeSandbox

Loading

CodeSandbox

Empty State

By using the <EmptyState /> subcomponent it is possible to define a custom message that will be displayed if no data was provided to the Sparkline component.

CodeSandbox

Error State

The <ErrorState /> subcomponent can be used to customise the error message that will be displayed when an error occurs in the Sparkline component.

CodeSandbox

Scales

The Sparkline component supports the Y-axis scale configuration only in the bar variant. To configure a scale, the Sparkline.YAxis subcomponent should be used. The Sparkline.YAxis component requires a scale prop to be passed with the two possible options: linear (default) or log.

CodeSandbox

Gap policy

Gaps in data refer to missing or unrepresented values between existing data points. In a dataset exclusively with timestamps, no continuity can be determined and therefore there are always “gaps” between data points regardless of the resolution of the dataset. In a timeframe dataset however, gaps are considered when the end timestamp of the previous data point is earlier than the start timestamp of the next data point, meaning there is a timespan between the end of a previous data point and the next one with no given value.

The Sparkline provides the gapPolicy prop to configure how gaps are visualized in a chart. There are two gapPolicy options available: gap, and connect.

• The gap option displays gaps on the chart as is (e.g. breaks along a line). This option helps to see the absence of data during a period of time.
• The connect option connects consecutive data points irrespective of the gap using linear interpolation.

CodeSandbox

Thresholds

Thresholds are used to mark meaningful ranges or values on a Sparkline and they add contextual information to a numerical axis. There are two variants of thresholds:

• a specific point represented by a line across.
• a range - or filled area - represented by a band across.

Point and Range

CodeSandbox

Both point and range can be represented by static or dynamic data sources. A static data source has a single value representing a point or a single key-value pair representing a fixed range. A dynamic data source has a data array containing more than one value or various key-value pairs.

There are three different types of threshold markers:

• Range filled, where the value range is defined in order to display the threshold band. The upper and lower lines are not drawn.

• Range stroke-only variant, where a value range is defined in order to display the threshold band represented by upper and lower dashed lines.

• Point, where only one value is required to display the threshold. It's represented by a dashed line.

Dynamic Point and Dynamic Range

CodeSandbox

Dynamic Range Stroke Only and Static Ranges

CodeSandbox

Point and Range with Area Variant and Ticks

CodeSandbox

Series Range

The Sparkline component supports curve prop only in the line and area variant. By default, this value is set to linear showing sharp corners in the joins of the lines. It can also be set to smooth providing a continuous curve.

CodeSandbox