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.
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.
Loading
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.
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.
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.
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
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
Dynamic Range Stroke Only and Static Ranges
Point and Range with Area Variant and Ticks
Series Range
The curve
prop allows to customize the line and area shape. 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.