Tiny inline trend chart rendered as plain SVG, supporting line, area, and bar variants.
Sparkline renders a compact trend visualisation suitable for dashboard tiles and table rows. Line, area, and bar variants use the shared chart blue by default. It uses native SVG without any chart dependency and stays accessible through an explicit label.
Default variant draws a smooth trend line.
<Sparkline data={[4, 8, 6, 12, 9, 14, 11]} label="Deployments per day" />import { Sparkline } from "@froggdesign/enter-ui-react";line, area, and bars share the same data shape.
Use tone to pair a trend with its positive or negative numeric change.
Provide an aria-label or label describing the trend so screen readers announce it. When omitted, the SVG is marked aria-hidden for decorative use only.
tone: neutral (default), success, or error.
data: required array of numbers.
variant: line (default), area, bars.
width / height: SVG render size in pixels (defaults 120 × 32).
label: accessible description; required for non-decorative sparklines.
Extends svg props.
Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.