Sparkline

<quiet-sparkline>

stable

since 1.0

Sparklines show at-a-glance trends in a small, inline chart that fits within text or tables.

<quiet-sparkline 
  label="Number of cat treats given per day showing an increasing trend"
  data="10 20 40 25 35 25 60 50 70"
  style="height: 40px;"
></quiet-sparkline>

In the same way that images require alt text, you should add a label to every sparkline. The label won't be displayed, but it will be announced by assistive devices.

Changing the size Jump to heading

By default, sparklines are styled with a 1em height to fit properly within headings and text.

This week's website traffic has slightly increased.

<p>
  This week's website traffic
  <quiet-sparkline 
    label="Website traffic showing a slightly positive trend"
    data="10 16 12 18 30"
  ></quiet-sparkline>  
  has slightly increased.
</p>

To set a specific size, adjust the width, height, or aspect-ratio CSS properties.

<quiet-sparkline 
  label="Monthly cat toy purchases showing increased spending over time"
  data="10 20 40 25 35 25 60 50 70" 
  style="width: 100%; height: auto;"
></quiet-sparkline>

Changing the appearance Jump to heading

By default, sparklines render with a gradient fill. Set the appearance attribute to solid or line to render a solid fill or a simple line instead.

<quiet-sparkline 
  appearance="gradient"
  label="Weekly cat food consumption showing typical feeding patterns"
  data="10 20 40 25 35 25 60 50 70" 
  style="height: 40px;"
  trend="auto"
></quiet-sparkline>

<quiet-sparkline 
  appearance="solid"
  label="Weekly cat food consumption showing typical feeding patterns"
  data="10 20 40 25 35 25 60 50 70" 
  style="height: 40px;"
  trend="auto"
></quiet-sparkline>

<quiet-sparkline 
  appearance="line"
  label="Weekly cat food consumption showing typical feeding patterns"
  data="10 20 40 25 35 25 60 50 70" 
  style="height: 40px;"
  trend="auto"
></quiet-sparkline>

Curves Jump to heading

Set the curve attribute to linear, natural, or step to change the style of the curve.

<quiet-sparkline 
  label="Hourly cat meows tracked throughout the day using a linear curve"
  curve="linear"
  data="10 20 40 25 35 25 60 50 70" 
  style="height: 40px;"
></quiet-sparkline>

<quiet-sparkline 
  label="Hourly cat meows tracked throughout the day using a natural curve"
  curve="natural"
  data="10 20 40 25 35 25 60 50 70" 
  style="height: 40px;"
></quiet-sparkline>

<quiet-sparkline 
  label="Hourly cat meows tracked throughout the day using a step curve"
  curve="step"
  data="10 20 40 25 35 25 60 50 70" 
  style="height: 40px;"
></quiet-sparkline>

Showing trends Jump to heading

Set the trend attribute to negative, neutral, or positive to visually indicate a trend.

<!-- Negative trend -->
<quiet-sparkline 
  label="Decreasing trend in scratching post usage"
  data="70 75 60 50 55 35 25" 
  trend="negative"
  style="height: 40px;"
></quiet-sparkline>

<!-- Neutral trend -->
<quiet-sparkline 
  label="Stable pattern of cat litter box visits"
  data="45 50 42 48 44 46 45" 
  trend="neutral"
  style="height: 40px;"
></quiet-sparkline>

<!-- Positive trend -->
<quiet-sparkline 
  label="Increasing frequency of purring episodes"
  data="25 35 30 50 45 65 75" 
  trend="positive"
  style="height: 40px;"
></quiet-sparkline>

Styling sparklines Jump to heading

Use the --fill-color, --line-color, and --line-width custom properties to change the sparkline's styles.

<quiet-sparkline 
  label="Weekly likes for cat memes growing in popularity"
  data="10 20 40 25 35 25 60 50 70"
  style="
    height: 60px;
    --fill-color: deeppink;
    --line-color: deeppink;
    --line-width: 3px;
  "
></quiet-sparkline>

Combine sparklines with cards for an elegant way to display stats.

<quiet-card class="sparkline__stat">
  <div class="description">
    <small>Revenue</small><br>
    $12,345
  <div>
  <quiet-sparkline 
    label="Number of cat treats given per day showing an increasing trend"
    data="10 20 17 23 27 22 30 38 44"
    curve="natural"
    appearance="solid"
  ></quiet-sparkline>
</quiet-card>

<style>
  quiet-card.sparkline__stat {
    max-width: 280px;

    &::part(body) {
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .description {
      font-size: 2.25rem;
      font-weight: var(--quiet-font-weight-semibold);
      line-height: 1.2;
      padding: .5rem 1.5rem 0 1.5rem;
    }

    small {
      font-weight: var(--quiet-font-weight-normal);
      font-size: 0.9375rem;
      color: var(--quiet-text-muted);
    }

    quiet-sparkline {
      width: 100%;
      height: auto; 
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-sparkline> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/sparkline/sparkline.js';

To manually import <quiet-sparkline> from npm, use the following code.

import '@quietui/quiet/dist/components/sparkline/sparkline.js';

Sparkline has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`label`	An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so make sure to describe it appropriately.	`string`	`''`
`data`	A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are required to generate a chart.	`string`	`''`
`appearance`	Determines the sparkline's appearance.	`'gradient' 'line' 'solid'`	`'gradient'`
`trend`	Draws the component with colors to visually indicate the specified trend.	`'positive' 'negative' 'neutral'`
`curve`	The interpolation method used to connect data points on the line.	`'linear' 'natural' 'step'`	`'linear'`

CSS custom properties Jump to heading

Sparkline supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--fill-color`	The start color of the gradient fill
`--gradient-stop-color`	The end color of the gradient fill

Sparkline

Examples Jump to heading

Changing the size Jump to heading

Changing the appearance Jump to heading

Curves Jump to heading

Showing trends Jump to heading

Styling sparklines Jump to heading

API Jump to heading

Importing Jump to heading

Properties Jump to heading

CSS custom properties Jump to heading

Sparkline

Examples Jump to heading #

Changing the size Jump to heading #

Changing the appearance Jump to heading #

Curves Jump to heading #

Showing trends Jump to heading #

Styling sparklines Jump to heading #

API Jump to heading #

Importing Jump to heading #

Properties Jump to heading #

CSS custom properties Jump to heading #

Examples Jump to heading

Changing the size Jump to heading

Changing the appearance Jump to heading

Curves Jump to heading

Showing trends Jump to heading

Styling sparklines Jump to heading

API Jump to heading

Importing Jump to heading

Properties Jump to heading

CSS custom properties Jump to heading