Charts / CH-RNK-01
CH-RNK-01 . family RNK

BAR-H

horizontal bar. Needs: one categorical dimension + one non-negative measure.

rankingcomparison

DL-01 AGRAW
Electrical holds 34 of 109 open items, the largest single backlog Electrical 34 items Mechanical 28 Piping 21 Instrumentation 17 Civil 9 Source: sample dataset v1, 2026-07-12

Use when

  • ranking categories by a single measure
  • fewer than 12 categories
  • category names too long for vertical bars

Do not use when

  • time series (use CH-TIM-01 LINE)
  • magnitude in natural category order (use CH-MAG-01 COLUMN)
  • part-to-whole shares (use CH-PTW-01 when built)
  • more than 12 categories (aggregate the tail into Other)

See instead

Alternatives

  • CH-RNK-03 (lollipop, planned)
  • CH-RNK-06 (table with bars, planned)

Rules

  • bars start at zero, always
  • rows sorted descending by value; the renderer enforces this
  • direct value labels; no value axis, no gridlines
  • at most one highlighted bar (role primary); all others role muted
  • unit appears once, on the first value label only

Never do this

  • value axis plus direct labels (pick direct labels)
  • one color per bar (rainbow bars)
  • 3D depth or shadows on bars
  • truncated baseline to dramatize differences
  • alphabetical sorting when the message is rank

QA before delivering

  • baseline at zero
  • rows descending by value
  • exactly one unit mention
  • highlight count <= 1
  • title states a finding with a number
  • source line present bottom-left

Data shape

titlestring, action title stating the finding with a number
eyebrowstring caps, rendered only when the DL chrome asks for it
sourcestring, rendered bottom-left, always
unitstring, appears once, on the first value label
categoriesarray of {label: string, value: number >= 0, highlight?: bool}, at most one highlight
Sample data (golden)
{
  "title": "Electrical holds 34 of 109 open items, the largest single backlog",
  "eyebrow": "OPEN ITEMS . WEEK 28",
  "source": "Source: sample dataset v1, 2026-07-12",
  "unit": "items",
  "categories": [
    {
      "label": "Electrical",
      "value": 34,
      "highlight": true
    },
    {
      "label": "Mechanical",
      "value": 28
    },
    {
      "label": "Piping",
      "value": 21
    },
    {
      "label": "Instrumentation",
      "value": 17
    },
    {
      "label": "Civil",
      "value": 9
    }
  ]
}