DitherCharts

Sparkline chart

Updated

SparklineChart draws a small line, area or bar trend with no axes, for a KPI tile or a table cell; it is a still picture with a spoken summary until interactive adds the keys. Like every DitherCharts chart, it fills its container's width, animates in, moves a cursor with the arrow keys once it's interactive.

Example

Sparkline - Line

A year of revenue under a KPI, the latest month dotted

Sparkline - Line

Install it:

npx dithercharts add sparkline-chart

Then use it:

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [31,33,30,36,38,35,40,41,39,43,44,45]

export function ChartSparklineLine() {
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Revenue</p>
      <p className="mt-1 font-heading text-3xl">$45,231</p>
      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
      <div className="mt-4">
        <SparklineChart type="line" data={data} label="Revenue" />
      </div>
    </div>
  )
}

Installing needs DitherCharts Pro. See pricing.

Revenue

$45,231

+20.1% from last month

import { SparklineChart } from "@/components/dithercharts/sparkline-chart"

const data = [31,33,30,36,38,35,40,41,39,43,44,45]

export function ChartSparklineLine() {
  return (
    <div className="border p-4">
      <p className="text-sm text-muted-foreground">Revenue</p>
      <p className="mt-1 font-heading text-3xl">$45,231</p>
      <p className="text-xs text-muted-foreground">+20.1% from last month</p>
      <div className="mt-4">
        <SparklineChart type="line" data={data} label="Revenue" />
      </div>
    </div>
  )
}

Install

Charts install with DitherCharts Pro. See Installation to log in and import the stylesheet.

npx dithercharts add sparkline-chart

Props

SparklineChart props
PropTypeDefaultDescription
datarequiredType readonly number[] | readonly ChartRow[]Default –The values, left to right ([3, 5, 4, 8]), or one row per x position with config and xKey.
configType ChartConfigDefault –With rows: the data key to plot, by its first entry (its label and pattern).
xKeyType stringDefault –With rows: the row key that holds the x label, shown in the tooltip.
typerequiredType "line" | "area" | "bar"Default –A line, a filled area, or one bar per value; bars below zero are striped.
labelrequiredType stringDefault –Accessible name, e.g. "Revenue". A static spark reads it with its count, low, high and latest value.
dotType booleanDefault true for a line, false for an areaA square on the latest value; ignored for bars.
interactiveType booleanDefault falseHover and arrow keys move a cursor over the values, with a tooltip and a live region.
tooltipType TooltipOptions | falseDefault –The interactive tooltip's label and look, or false for none (use onActiveChange instead).
onActiveChangeType (point?: { index: number; value: number }) => voidDefault –Called with the value under the interactive cursor, and with undefined when it leaves.
curveType "monotone" | "linear" | "step"Default "monotone"How the line runs between points.
fillType "solid" | "gradient"Default "solid"An area's flat 50% fill, or a fade from the top of the plot to the baseline.
styleType StyleIdDefault "bayer4"Dither style.
animationType "develop" | "none"Default "develop"Entrance animation; reduced motion always shows the final frame.
heightType numberDefault 40Height in CSS pixels.
widthType number | stringDefault "100%"Width in CSS pixels or any CSS length, e.g. 64 for a word-size spark in a sentence.
cellType numberDefault 2Dither cell size in CSS pixels.
classNameType stringDefault –Classes on the outer span.

Styles

The dither styles style takes:

  • "bayer2"
  • "bayer4"
  • "bayer8"
  • "blue-noise"
  • "halftone"
  • "crosshatch"
  • "pixel"
  • "stipple"
  • "engraved"
  • "mezzotint"
  • "woodcut"
  • "floyd-steinberg"
  • "atkinson"
  • "riemersma"

Keyboard and accessibility

By default a sparkline is a still picture: no Tab stop, its label naming its count, low, high and latest value. With interactive, it takes these keys. The chart is one Tab stop. Focusing it from the keyboard puts the cursor on the first point, or where the keys last left it; moving focus away clears it. The keys stop at the ends.

Chart keys
KeyAction
Left arrow Right arrowPrevious / next point (interactive)
Home EndFirst / last point (interactive)
EscapeDismiss the cursor (interactive)

Screen readers

  • The chart's label names it, says how many points it has and lists these keys.
  • Each key press is announced in a polite live region. Moving the pointer is silent.

On a touch screen, a tap pins the cursor and a tap outside the chart dismisses it.

See every sparkline chart example