Skip to content
Pinky UI

data

Interactive Sparkline

A dependency-free SVG trend with point inspection and textual output.

  • data
  • sparkline
  • svg
  • trend

Live preview

Weekly viewsSeven points, rising overall.
Sun26k

Quick usage

usage
import { InteractiveSparkline } from "@pinky-ui/systems";

<InteractiveSparkline data={history} label="Revenue history" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
dataSparklinePoint[]—Small ordered labeled value series.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • No chart dependency and one lightweight SVG.
  • Selection updates only when the nearest point changes.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Small metric histories

When not to use

  • Multi-axis or analysis-heavy charts

Skill

Purpose

InteractiveSparkline gives a small time series lightweight SVG line/area context plus point inspection. Use it beside one metric, not as a charting platform.

Provide a useful label, summary and formatted values. Avoid dense datasets, multiple axes, financial analysis or color-only trends. If interpretation needs legends and scales, use a full accessible chart.

Pointer, touch and Arrow/Home/End inspect the same points and the selected label/value remains textual. SVG is responsive and dependency-free. Keep point counts modest and do not continuously animate the line.

Open this skill on its own page