Sparkline

Word-sized chart for KPI tiles: no axes, no legend. Hovering shows the point’s value; screen readers get a one-sentence summary (first, last, minimum and maximum).

Import

import { Sparkline } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/sparkline.

Usage

<Sparkline
  data={salesLast14}
  label="Ventas de los últimos 14 días"
  type="line"
  height={36}
  showLast
  valueFormat="currency"
  categories={days}
  animate
/>

Props

Prop	Type	Default	Description
data *	readonly (number | null)[]
label *	string		Accessible description, e.g. “Ventas de los últimos 14 días”.
type	"area" | "line" | "bar"	"line"
color	string		CSS color; the brand tone (accent-word) by default.
height	number | "fill"	36	Pixels, or “fill” to take the full height of the parent.
width	number		Fixed width; fills the container when omitted.
showLast	boolean	true	Dot on the last value (lines and areas).
valueFormat	ValueFormat		Format of the hovered value and the summary for screen readers.
categories	readonly string[]		Optional names of the points, shown next to the hovered value.
highlightIndex	number		Index of a bar drawn in full color while the others are muted (bars only).
animate	boolean	true
className	string

* marks a required prop.

Storybook stories

• Default
• Area
• Bars
• Falling Stock
• Inside KPI tiles

Source

packages/ui/src/charts/sparkline/sparkline.tsx