Skip to content
Pinky UI

data

Interactive Bar Ranking

Ranked rows can change metric and order while each item keeps its spatial identity and value.

  • data
  • chart
  • ranking
  • sorting
  • bars

Live preview

  1. 01
    Research12 notes
    84%
  2. 02
    Release15 notes
    76%
  3. 03
    Prototype9 notes
    68%

Change the metric or sort order. Rows keep their identity while the ranking changes.

Quick usage

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

<InteractiveBarRanking items={items} metrics={metrics} label="Campaign ranking" />

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
itemsBarRankingItem[]—Named items with values for each selectable metric.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Metric and sort controls are semantic buttons; each ranked row exposes rank, label and value.
  • Bars are paired with numbers and order, so colour is not the only signal.

Performance

  • Layout motion is limited to discrete reorder events; reduced motion switches directly to the new order.

Reduced motion

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

When to use

  • Small ranked sets where sorting is part of the reading task

When not to use

  • Large tables that need pagination, filtering or virtualization

Skill

Purpose

Ranked rows can change metric and order while each item keeps its spatial identity and value — reordering is a layout animation, not a redraw.

Good for

  • Small ranked sets where sorting is part of the reading task

Avoid for

  • Large tables that need pagination, filtering or virtualization

Usage

tsx
<InteractiveBarRanking items={items} metrics={metrics} label="Campaign ranking" />

Accessibility

  • Metric and sort controls are semantic buttons; each ranked row exposes rank, label and value.
  • Bars are paired with numbers and order, so colour is not the only signal.

Performance

  • Layout motion is limited to discrete reorder events; reduced motion switches directly to the new order.

Related: comparison-bars, selection-tray.

Open this skill on its own page