EEnterUI
DocsComponentsThemesDonation
Get Started
      • Meter
      • Gauge
      • Sparkline
EnterUIDocsData AnalyticsMetrics and ChartsScalar MetricsSparkline
Data AnalyticsUpdated 6 May 2026

Sparkline

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. It uses native SVG without any chart dependency and stays accessible through an explicit label.

#Default usage

Line sparkline

Default variant draws a smooth trend line.

Code
<Sparkline data={[4, 8, 6, 12, 9, 14, 11]} label="Deployments per day" />

#Import

Code
import { Sparkline } from "@froggdesign/enter-ui-react";

#Variants

Variants

line, area, and bars share the same data shape.

#Accessibility

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.

#API

  • 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.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousGauge
NextLineChart

On this page

  1. Default usage
  2. Import
  3. Variants
  4. Accessibility
  5. API
  6. Styling