Sparkline

<wa-sparkline>

Pro

Included with Web Awesome Pro

Stable

Sparklines display inline data trends as compact, visual charts.

Get Sparkline with Web Awesome Pro!

Subscribing to Web Awesome Pro gives you every Pro component, plus premium themes, color tools, team collaboration, and more.

Pro Components
Responsive Layout Tools
Ever-Growing Pattern Library
Unlimited Hosted Projects
Pre-Built Pro Themes
Pro Theme Builder
Pro Color Tools
Official Figma Design Kit Newer additions to Web Awesome, like <wa-toast>, aren't included in the currently available kit, but a new version is in the works.
Track its progress on GitHub.
WA Pro Perpetual License
Actual Human™ Support

Get Web Awesome Pro + Sparkline!

Already have Pro? Log in

<wa-sparkline
  label="Weekly sales performance showing growth"
  data="10 25 15 40 30 45 35"
  style="height: 2rem;"
></wa-sparkline>

Sparklines are small, word-sized graphics designed to fit within text or table cells. They show data trends at a glance without requiring dedicated chart space.

Always include a descriptive label attribute.
It won't be visible, but screen readers announce it.

Examples

Link to This Section

Providing Data

Link to This Section

Provide numeric data as space-separated values. At least two values are required to generate the sparkline.

Daily Wordle guesses are trending down.

<p>
  Daily Wordle guesses
  <wa-sparkline label="Daily Wordle guess counts trending down over the week" data="5 4 4 3 4 2 3"></wa-sparkline>
  are trending down.
</p>

Appearance

Link to This Section

Use the appearance attribute to control how the sparkline fills. The default is solid which shows a filled area under the line. You can also choose gradient for a faded fill or line for stroke only.

<div class="wa-cluster wa-gap-l">
  <wa-sparkline
    appearance="solid"
    data="10 20 15 25 20 30"
    label="Solid appearance example"
    style="height: 2rem;"
  ></wa-sparkline>

  <wa-sparkline
    appearance="gradient"
    data="10 20 15 25 20 30"
    label="Gradient appearance example"
    style="height: 2rem;"
  ></wa-sparkline>

  <wa-sparkline
    appearance="line"
    data="10 20 15 25 20 30"
    label="Line appearance example"
    style="height: 2rem;"
  ></wa-sparkline>
</div>

Trend

Link to This Section

Apply semantic coloring with the trend attribute to visually indicate the nature of the data.

Revenue +25%
Churn -15%
Users stable

<div class="wa-cluster wa-gap-l">
  <div>
    <wa-sparkline
      trend="positive"
      appearance="gradient"
      data="20 25 22 30 35 40 50"
      label="Revenue showing positive growth"
      style="height: 2rem;"
    ></wa-sparkline>
    <div class="wa-caption-s" style="text-align: center; margin-block-start: 1rem;">Revenue +25%</div>
  </div>
  <div>
    <wa-sparkline
      trend="negative"
      appearance="gradient"
      data="50 45 48 40 35 30 25"
      label="Churn rate showing negative trend"
      style="height: 2rem;"
    ></wa-sparkline>
    <div class="wa-caption-s" style="text-align: center; margin-block-start: 1rem;">Churn -15%</div>
  </div>
  <div>
    <wa-sparkline
      trend="neutral"
      appearance="gradient"
      data="30 32 28 31 29 30 31"
      label="Active users showing stable trend"
      style="height: 2rem;"
    ></wa-sparkline>
    <div class="wa-caption-s" style="text-align: center; margin-block-start: 1rem;">Users stable</div>
  </div>
</div>

Curve

Link to This Section

Control how data points connect with the curve attribute. Use linear (default), natural, or step.

<div class="wa-cluster wa-gap-l">
  <wa-sparkline
    curve="linear"
    appearance="gradient"
    data="10 40 20 50 30 60"
    label="Linear interpolation example"
    style="height: 2rem;"
  ></wa-sparkline>

  <wa-sparkline
    curve="natural"
    appearance="gradient"
    data="10 40 20 50 30 60"
    label="Natural curve interpolation example"
    style="height: 2rem;"
  ></wa-sparkline>

  <wa-sparkline
    curve="step"
    appearance="gradient"
    data="10 40 20 50 30 60"
    label="Step interpolation example"
    style="height: 2rem;"
  ></wa-sparkline>
</div>

Size

Link to This Section

Sparklines default to height: 1em and aspect-ratio: 4/1 so they fit naturally within text. Override these with CSS for larger displays.

<wa-sparkline
  appearance="gradient"
  curve="natural"
  data="10 15 12 18 22 20 28 25 32 30 35"
  label="Full-width sparkline showing monthly metrics"
  style="width: 100%; height: 6rem;"
></wa-sparkline>

Colors

Link to This Section

Override the default colors using CSS custom properties.

<wa-sparkline
  appearance="gradient"
  data="10 20 15 25 20 30"
  label="Custom purple sparkline"
  style="
    height: 3rem;
    --line-color: var(--wa-color-purple-50);
    --fill-color: var(--wa-color-purple-50);
    --line-width: 3;
  "
></wa-sparkline>

Tables

Link to This Section

Sparklines work well in data tables to visualize trends alongside other metrics.

  
      Metric
      Trend
      Change
    
      Page Views
      
      +31%
    
      Bounce Rate
      
      +8%
    
      Avg. Session
      
      0%

Metric	Trend	Change
Page Views		+31%
Bounce Rate		+8%
Avg. Session		0%

<table class="wa-native">
  <thead>
    <tr>
      <th>Metric</th>
      <th>Trend</th>
      <th>Change</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Page Views</td>
      <td>
        <wa-sparkline trend="positive" data="1200 1350 1280 1420 1580" label="Page views trend"></wa-sparkline>
      </td>
      <td><wa-badge variant="success">+31%</wa-badge></td>
    </tr>
    <tr>
      <td>Bounce Rate</td>
      <td>
        <wa-sparkline trend="negative" data="45 42 48 38 35" label="Bounce rate trend"></wa-sparkline>
      </td>
      <td><wa-badge variant="danger">+8%</wa-badge></td>
    </tr>
    <tr>
      <td>Avg. Session</td>
      <td>
        <wa-sparkline trend="neutral" data="180 175 182 178 180" label="Average session duration"></wa-sparkline>
      </td>
      <td><wa-badge variant="neutral">0%</wa-badge></td>
    </tr>
  </tbody>
</table>

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/[email protected]/components/sparkline/sparkline.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/sparkline/sparkline.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/sparkline/sparkline.js';

To import this component for React 18 or below, use the following code:

import WaSparkline from '@awesome.me/webawesome/dist/react/sparkline/index.js';

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`appearance` `appearance`	The visual fill style of the sparkline. Type `'gradient' \| 'line' \| 'solid'` Default `'solid'`
`curve` `curve`	The type of curve used to connect data points. Type `'linear' \| 'natural' \| 'step'` Default `'linear'`
`data` `data`	Space-separated numeric values to visualize (e.g., "10 20 40 25 35"). Type `string` Default `''`
`label` `label`	An accessible label describing the sparkline for screen readers. Type `string` Default `''`
`trend` `trend`	A trend to indicate, which will affect the sparkline's default color. Type `'positive' \| 'negative' \| 'neutral'`

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--fill-color`	The fill color for the area under the line.
`--line-color`	The color of the sparkline stroke.
`--line-width`	The width of the sparkline stroke.

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`fill`	The filled area under the line (visible with gradient or solid appearance).	`::part(fill)`
`line`	The sparkline stroke path.	`::part(line)`
`sparkline`	The component's outer wrapper.	`::part(sparkline)`
`base`	Deprecated. Use the `sparkline` part instead.	`::part(base)`

Need a hand?

Report a bug

Ask for help

Sparkline

Examples

Providing Data

Appearance

Trend

Curve

Size

Colors

Tables

API

Importing

Attributes & Properties

CSS Custom Properties

CSS Parts

Quick Links

Recent Searches

Sparkline

Examples

Providing Data

Appearance

Trend

Curve

Size

Colors

Tables

API

Importing

Attributes & Properties

CSS Custom Properties

CSS Parts

Quick Links

Recent Searches

We Have Cookies…