SparklineChart

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.

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.

The Sparkline has two variants and can be either displayed as a line(default) or area.

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.

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

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

Props

SparklineProps

Name	Type	Default	Description
data	| []	-	Data to show
color?		-	Sparkline color
variant?		-	Sparkline variant (line, area)
showTicks?		-	Whether Sparkline shows X Axis ticks or not
loading?		-	When true: Sets an overlay with default loader.
gapPolicy?	|	-	Gap policy