Sparkline

<afp-sparkline>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A compact sparkline chart for displaying data trends inline.

<afp-sparkline data="3 7 2 9 5 11 8 14 6 12" label="Sales trend"></afp-sparkline>

<afp-sparkline [data]="'3 7 2 9 5 11 8 14 6 12'" [label]="'Sales trend'"></afp-sparkline>

<AfpSparkline data="3 7 2 9 5 11 8 14 6 12" label="Sales trend"></AfpSparkline>

<AfpSparkline :data="'3 7 2 9 5 11 8 14 6 12'" :label="'Sales trend'"></AfpSparkline>

Examples #

Appearance #

Use the appearance attribute to control the fill style.

solid

gradient

line

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">solid</span>
    <afp-sparkline appearance="solid" data="3 7 2 9 5 11 8 14 6 12" label="Solid sparkline" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">gradient</span>
    <afp-sparkline appearance="gradient" data="3 7 2 9 5 11 8 14 6 12" label="Gradient sparkline" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">line</span>
    <afp-sparkline appearance="line" data="3 7 2 9 5 11 8 14 6 12" label="Line sparkline" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">solid</span>
    <afp-sparkline [appearance]="'solid'" [data]="'3 7 2 9 5 11 8 14 6 12'" [label]="'Solid sparkline'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">gradient</span>
    <afp-sparkline [appearance]="'gradient'" [data]="'3 7 2 9 5 11 8 14 6 12'" [label]="'Gradient sparkline'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">line</span>
    <afp-sparkline [appearance]="'line'" [data]="'3 7 2 9 5 11 8 14 6 12'" [label]="'Line sparkline'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">solid</span>
    <AfpSparkline appearance="solid" data="3 7 2 9 5 11 8 14 6 12" label="Solid sparkline" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">gradient</span>
    <AfpSparkline appearance="gradient" data="3 7 2 9 5 11 8 14 6 12" label="Gradient sparkline" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">line</span>
    <AfpSparkline appearance="line" data="3 7 2 9 5 11 8 14 6 12" label="Line sparkline" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">solid</span>
    <AfpSparkline :appearance="'solid'" :data="'3 7 2 9 5 11 8 14 6 12'" :label="'Solid sparkline'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">gradient</span>
    <AfpSparkline :appearance="'gradient'" :data="'3 7 2 9 5 11 8 14 6 12'" :label="'Gradient sparkline'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">line</span>
    <AfpSparkline :appearance="'line'" :data="'3 7 2 9 5 11 8 14 6 12'" :label="'Line sparkline'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
</div>

Trend #

Use the trend attribute to apply semantic coloring.

neutral

positive

negative

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">neutral</span>
    <afp-sparkline trend="neutral" appearance="gradient" data="5 7 6 8 7 9 8 10" label="Neutral trend" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">positive</span>
    <afp-sparkline trend="positive" appearance="gradient" data="3 4 5 6 8 9 11 12" label="Positive trend" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">negative</span>
    <afp-sparkline trend="negative" appearance="gradient" data="12 11 9 8 6 5 4 3" label="Negative trend" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">neutral</span>
    <afp-sparkline [trend]="'neutral'" [appearance]="'gradient'" [data]="'5 7 6 8 7 9 8 10'" [label]="'Neutral trend'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">positive</span>
    <afp-sparkline [trend]="'positive'" [appearance]="'gradient'" [data]="'3 4 5 6 8 9 11 12'" [label]="'Positive trend'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">negative</span>
    <afp-sparkline [trend]="'negative'" [appearance]="'gradient'" [data]="'12 11 9 8 6 5 4 3'" [label]="'Negative trend'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">neutral</span>
    <AfpSparkline trend="neutral" appearance="gradient" data="5 7 6 8 7 9 8 10" label="Neutral trend" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">positive</span>
    <AfpSparkline trend="positive" appearance="gradient" data="3 4 5 6 8 9 11 12" label="Positive trend" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">negative</span>
    <AfpSparkline trend="negative" appearance="gradient" data="12 11 9 8 6 5 4 3" label="Negative trend" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">neutral</span>
    <AfpSparkline :trend="'neutral'" :appearance="'gradient'" :data="'5 7 6 8 7 9 8 10'" :label="'Neutral trend'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">positive</span>
    <AfpSparkline :trend="'positive'" :appearance="'gradient'" :data="'3 4 5 6 8 9 11 12'" :label="'Positive trend'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">negative</span>
    <AfpSparkline :trend="'negative'" :appearance="'gradient'" :data="'12 11 9 8 6 5 4 3'" :label="'Negative trend'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
</div>

Curve #

Use the curve attribute to control how data points are connected.

linear

natural

step

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">linear</span>
    <afp-sparkline curve="linear" appearance="gradient" data="3 9 2 11 5 14 8 6 12 10" label="Linear curve" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">natural</span>
    <afp-sparkline curve="natural" appearance="gradient" data="3 9 2 11 5 14 8 6 12 10" label="Natural curve" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">step</span>
    <afp-sparkline curve="step" appearance="gradient" data="3 9 2 11 5 14 8 6 12 10" label="Step curve" style="height: 2rem; width: 10rem"></afp-sparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">linear</span>
    <afp-sparkline [curve]="'linear'" [appearance]="'gradient'" [data]="'3 9 2 11 5 14 8 6 12 10'" [label]="'Linear curve'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">natural</span>
    <afp-sparkline [curve]="'natural'" [appearance]="'gradient'" [data]="'3 9 2 11 5 14 8 6 12 10'" [label]="'Natural curve'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">step</span>
    <afp-sparkline [curve]="'step'" [appearance]="'gradient'" [data]="'3 9 2 11 5 14 8 6 12 10'" [label]="'Step curve'" [style]="'height: 2rem; width: 10rem'"></afp-sparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">linear</span>
    <AfpSparkline curve="linear" appearance="gradient" data="3 9 2 11 5 14 8 6 12 10" label="Linear curve" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">natural</span>
    <AfpSparkline curve="natural" appearance="gradient" data="3 9 2 11 5 14 8 6 12 10" label="Natural curve" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">step</span>
    <AfpSparkline curve="step" appearance="gradient" data="3 9 2 11 5 14 8 6 12 10" label="Step curve" style="height: 2rem; width: 10rem"></AfpSparkline>
  </div>
</div>

<div class="afp-stack afp-gap-m">
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">linear</span>
    <AfpSparkline :curve="'linear'" :appearance="'gradient'" :data="'3 9 2 11 5 14 8 6 12 10'" :label="'Linear curve'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">natural</span>
    <AfpSparkline :curve="'natural'" :appearance="'gradient'" :data="'3 9 2 11 5 14 8 6 12 10'" :label="'Natural curve'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
  <div class="afp-cluster afp-gap-m" style="align-items: center">
    <span style="width: 5rem; font-size: var(--afp-font-size-s); color: var(--afp-color-text-quiet)">step</span>
    <AfpSparkline :curve="'step'" :appearance="'gradient'" :data="'3 9 2 11 5 14 8 6 12 10'" :label="'Step curve'" :style="'height: 2rem; width: 10rem'"></AfpSparkline>
  </div>
</div>

Inline usage #

Sparklines default to height: 1em so they naturally fit within text.

Revenue this quarter is up 18% compared to last quarter.

<p>
  Revenue this quarter
  <afp-sparkline data="5 8 6 9 7 11 10 13" trend="positive" appearance="gradient" label="Revenue trend" style="width: 4em"></afp-sparkline>
  is up 18% compared to last quarter.
</p>

<p>
  Revenue this quarter
  <afp-sparkline [data]="'5 8 6 9 7 11 10 13'" [trend]="'positive'" [appearance]="'gradient'" [label]="'Revenue trend'" [style]="'width: 4em'"></afp-sparkline>
  is up 18% compared to last quarter.
</p>

<p>
  Revenue this quarter
  <AfpSparkline data="5 8 6 9 7 11 10 13" trend="positive" appearance="gradient" label="Revenue trend" style="width: 4em"></AfpSparkline>
  is up 18% compared to last quarter.
</p>

<p>
  Revenue this quarter
  <AfpSparkline :data="'5 8 6 9 7 11 10 13'" :trend="'positive'" :appearance="'gradient'" :label="'Revenue trend'" :style="'width: 4em'"></AfpSparkline>
  is up 18% compared to last quarter.
</p>

Custom colors #

Use CSS custom properties to override the line and fill colors independently.

<afp-sparkline
  data="3 7 2 9 5 11 8 14 6 12"
  appearance="gradient"
  label="Custom colored sparkline"
  style="
    height: 3rem;
    width: 12rem;
    --afp-sparkline-line-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-fill-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-line-width: 2;
  "
></afp-sparkline>

<afp-sparkline
  [data]="'3 7 2 9 5 11 8 14 6 12'"
  [appearance]="'gradient'"
  [label]="'Custom colored sparkline'"
  [style]="'
    height: 3rem;
    width: 12rem;
    --afp-sparkline-line-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-fill-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-line-width: 2;
  '"
></afp-sparkline>

<AfpSparkline
  data="3 7 2 9 5 11 8 14 6 12"
  appearance="gradient"
  label="Custom colored sparkline"
  style="
    height: 3rem;
    width: 12rem;
    --afp-sparkline-line-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-fill-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-line-width: 2;
  "
></AfpSparkline>

<AfpSparkline
  :data="'3 7 2 9 5 11 8 14 6 12'"
  :appearance="'gradient'"
  :label="'Custom colored sparkline'"
  :style="'
    height: 3rem;
    width: 12rem;
    --afp-sparkline-line-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-fill-color: var(--afp-color-accent-fill-loud);
    --afp-sparkline-line-width: 2;
  '"
></AfpSparkline>

Properties

Learn more about properties.

Name Description Reflects

data

Space-separated numeric values to plot (minimum 2 required to render).

Type string

Default ''

label

Accessible label announced by screen readers in place of the SVG image.

Type string

Default ''

appearance

Visual fill style of the chart area.

Type

AfpSparklineAppearance

Name	Description
`SOLID`	Filled area beneath the line with a solid, semi-transparent color.
`GRADIENT`	Filled area beneath the line with a top-to-bottom opacity gradient.
`LINE`	Stroke only — no fill beneath the line.

AfpSparklineAppearance

Default AfpSparklineAppearance.SOLID

trend

Semantic trend direction — applies the matching design-system color.

Type

AfpSparklineTrend

Name	Description
`NEUTRAL`	No directional meaning — uses the brand color.
`POSITIVE`	Upward / favorable trend — uses the success color.
`NEGATIVE`	Downward / unfavorable trend — uses the error color.

AfpSparklineTrend

Default AfpSparklineTrend.NEUTRAL

curve

Interpolation method used to connect data points.

Type

AfpSparklineCurve

Name	Description
`LINEAR`	Straight lines between each consecutive data point.
`NATURAL`	Smooth curve using a Catmull-Rom → cubic Bézier conversion.
`STEP`	Horizontal then vertical segments — a staircase effect.

AfpSparklineCurve

Default AfpSparklineCurve.LINEAR

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The SVG root element.	`::part(base)`
`line`	The stroke path.	`::part(line)`
`fill`	The filled area path (solid and gradient appearances).	`::part(fill)`

CSS Custom Properties

Name	Description	Default
`--afp-sparkline-line-color`	Stroke color of the line.	`currentColor`
`--afp-sparkline-fill-color`	Fill color of the area beneath the line.	`currentColor`
`--afp-sparkline-line-width`	Stroke width of the line.	`1.5`
`--afp-sparkline-color-neutral`	Color applied when `trend` is `neutral`.	`--afp-color-brand-500`
`--afp-sparkline-color-positive`	Color applied when `trend` is `positive`.	`--afp-color-success-fill-loud`
`--afp-sparkline-color-negative`	Color applied when `trend` is `negative`.	`--afp-color-error-fill-loud`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/sparkline/sparkline.js';