Sparkline Chart

A small line chart with no axes or coordinates to show the general shape of a dataset.

Stable

Show details

Sparkline Chart shows the general shape of a dataset, which lets users preview a trend at a glance.

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

Element	Description	Optional?
1. Data line	Line that represents the mapped data points (based on the axes shown in a Line Chart).	No
2. Hover indicator	Circular target that appears on hover of a data point.	No

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

SparklineChart

Property	Values	Default
state Variant	rest \| hover	rest

SparklineChart

state hover

Sparkline Chart is a small line chart with no axes or coordinates to show the general shape of a dataset.

SparklineChart

state rest

Sparkline Chart is a small line chart with no axes or coordinates to show the general shape of a dataset.

Line Chart

Line Chart connects data points with lines from left to right to visualize relationships or trends in data.

Ask a question or submit a request

Find us in #team-frontend-foundations-requests Slack channel