BarList

Usage examples

import { BarList } from '@rookcom/monarch-react/charts';

<div style={{ width: '100%', maxWidth: '36rem' }}>
  <BarList
    label="Visibility score"
    ranked
    layout="inline"
    max={100}
    limit={4}
    items={[
      { id: 'a', label: 'Northfield', value: 82 },
      { id: 'you', label: 'Your site (you)', value: 71, highlighted: true },
      { id: 'b', label: 'Cobalt', value: 64 },
      { id: 'c', label: 'Fernway', value: null },
      { id: 'd', label: 'Tidewater', value: 38 },
    ]}
  />
</div>

import { BarList } from '@rookcom/monarch-react/charts';

<div style={{ width: '100%', maxWidth: '28rem' }}>
  <BarList
    label="Reply rate by channel"
    format="percent"
    max={1}
    items={[
      {
        id: 'e',
        label: 'Email',
        description: 'Spring outreach',
        value: 0.12,
        displayValue: '12% · 4 of 33',
      },
      {
        id: 'l',
        label: 'LinkedIn',
        description: 'Founders list',
        value: 0.21,
        displayValue: '21% · 9 of 43',
      },
      { id: 'c', label: 'Calls', description: 'Renewals', value: 0.05 },
    ]}
    locale="en-US"
  />
</div>

import { BarList } from '@rookcom/monarch-react/charts';

<div style={{ display: 'grid', gap: '1.5rem', width: '100%', maxWidth: '28rem' }}>
  <BarList label="Top referrers" items={[]} loading loadingRows={3} />
  <BarList label="Top referrers" items={[]} emptyState="No referrers in this period" />
</div>

Purpose

Compares a handful of named values at a glance. Each row keeps its label and value as text, so the list reads correctly without the bars.

Design principles

• Text first: labels and values are real list text; bars are decorative (aria-hidden).
• Largest first by default; missing values sort last and read as "No value", never as zero.
• One series colour (the first data palette colour); a highlighted row keeps it and the others fade.
• Values are formatted with Intl.NumberFormat (or Money for currency) in the viewer’s locale.

API reference

import { BarList } from '@rookcom/monarch-react/charts';

The ref and native attributes go to the root <div>; the list is a <ul>, or an <ol> when ranked.

Exported from @rookcom/monarch-react/charts, with the BarListItem type.

Generated from the TypeScript declarations of packages/react/src/components/charts/bar-list.

Properties

Bars are scaled to the largest value unless max is set. For ratios of a whole, pass max={1}.

Variants

States

Interaction behaviour

• Rows with href are links; clicking anywhere on the row follows the link.
• Hovering a linked row tints it and underlines the label.

Keyboard support

Rows without href are not focusable.

Accessibility

Role

list (<ul> or <ol>, with an explicit role so Safari keeps it)

Accessible name

label, e.g. "Top pages".

• Each row reads its label, description and value; the bar is hidden from assistive technology.
• A missing value is announced as "No value", not only shown in a tooltip.
• Rank numbers are hidden because an ordered list already announces positions.
• Linked rows have a focus ring around the whole row and are named by their label.
• In forced-colours mode bars are drawn in CanvasText with an outlined track.

Responsive behaviour

• Labels and descriptions truncate with an ellipsis; values never wrap.
• The inline layout falls back to stacked below 30rem, so it works at 320px.

Theme support

• Bars use --mn-color-data-1 on a --mn-color-bg-muted track, which are defined for light, dark and high-contrast themes.
• Values use the default text colour; rank and descriptions are muted.

Do and don't

Related components

• BarChart: Values over time or many categories with axes.
• StackedProportionBar: Parts of one whole in a single bar.
• DataTable: Many rows or several numeric columns.
• Progress: One value against a target or quota.

Dependencies

Testing coverage

• Named list, largest first, text values and decorative bars scaled to the largest value.
• sort none/asc, ranked ordered list.
• Percent, currency, compact, unit and custom formatting.
• Missing values announced and sorted last; display values.
• Linked rows reachable with Tab, custom router link component.
• limit with default and custom overflow footer; highlighted rows.
• Empty and loading states; zero values; ref and layout.

Tests: packages/react/src/components/charts/bar-list