Skip to content
Pinky UI

data

Interactive Line Chart

A calm line reading surface with snapped crosshair, direct values and keyboard point browsing.

  • data
  • chart
  • line
  • crosshair
  • reading

Live preview

Sun26k
Weekly usage7 data points. Focus the chart and use the arrow keys to read each point.

Focus the plot, then use ← → to move through the reading points. Pointer and touch follow the same rail.

Quick usage

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

<InteractiveLineChart data={points} label="Weekly usage" />

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
dataVizPoint[]—Ordered labelled values with optional context.
classNamestring—Styles the outer interaction surface.

Accessibility

  • The focused plot exposes a labelled reading rail and Arrow/Home/End point navigation.
  • The active value is announced beside the chart; no pointer hover is required.

Performance

  • Uses one lightweight SVG and updates only the active index.
  • No chart dependency or per-frame React tree is required.

Reduced motion

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

When to use

  • Small, inspectable trends where the current point matters

When not to use

  • Large analytical datasets that need zoom, multiple axes or aggregation

Skill

Purpose

A calm line reading surface with a snapped crosshair, direct values and keyboard point browsing — inspection without a heavy charting dependency.

Good for

  • Small, inspectable trends where the current point matters

Avoid for

  • Large analytical datasets that need zoom, multiple axes or aggregation

Usage

tsx
<InteractiveLineChart data={points} label="Weekly usage" />

Accessibility

  • The focused plot exposes a labelled reading rail and Arrow/Home/End point navigation.
  • The active value is announced beside the chart; no pointer hover is required.

Performance

  • Uses one lightweight SVG and updates only the active index.
  • No chart dependency or per-frame React tree is required.

Related: interactive-sparkline, data-lens.

Open this skill on its own page