Skip to content
Pinky UI

Interactive Line Chart

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

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

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.

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.

Source: packages/skills/data/interactive-line-chart.md