Skip to content

Cell Bar

Show a total built from its periods: a cell per month, each as wide as its amount, settled or projected, against a target.

import { CellBar, CellBarCell } from '@youj/react'

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use a cell bar where a total's length and its rhythm both matter: spend by month against a budget, hours by week against a plan, a quarter's revenue by month. Rows of them on one max compare totals, and each bar still shows how its total grew. For shares of a whole use a Share Bar; for one settled or pending amount, a Hatched Bar. The Plan vs actual card is built on it.

import { CellBar } from '@youj/react'

<CellBar
  label="nightly-summarizer, by month"
  cells={[
    { label: 'Aug', value: 980 },
    { label: 'Sep', value: 1060 },
    { label: 'Oct', value: 1120, projected: true },
  ]}
  max={10000}
  target={6240}
  tone="warning"
  formatValue={(v) => `$${v.toLocaleString('en-US')}`}
/>

Each cell is as wide as its value, with a 2px gap between cells; the bar runs to its total on a scale that ends at max (by default the total, or the target if larger). projected cells are hatched in the tone. target puts a dashed tick on the same scale, and targetLabel names it over the tick. formatValue writes amounts in the tooltips, captions and summary.

Reference

Propscells, max, target, targetLabel, tone, captions, formatValue…

Props

CellBar props
PropType
cellsRequiredreadonly CellBarCell[]–
maxnumber

The scale's end, the same for bars that compare. Default: the cells' total (or the target, if larger).

–
targetnumber

A plan or budget on the same scale: a dashed tick through the bar.

–
targetLabelstring

Written over the target's tick: "Plan".

–
toneCellBarTone
'accent''neutral''success''warning''danger''chart-1''chart-2''chart-3''chart-4''chart-5'

The cells' color.

default 'accent'

'accent'
captionsboolean

Each cell's label and amount under it, for a few wide cells.

default false

false
formatValue(value: number) => string

Writes an amount: "$1,240". Default: the locale's number format.

–
localestring

Default: the YoujProvider locale.

–
labelstring

Accessible name. Default: the labels' "Cell bar".

–
Other props pass through: extends ComponentProps<'div'>.
StylingParts and data attributes

Styling

Parts: cell-bar, cell-bar-track, cell-bar-cells, cell-bar-cell, cell-bar-target, cell-bar-target-label, cell-bar-captions, cell-bar-caption, cell-bar-tooltip and cell-bar-summary. The root has data-tone, and a projected cell data-yj-projected. The tone is --cell-bar-tone.

MotionOpen, reflow · reduced motion

Motion

Motion tokens
MomentTokens
Openthe cells open from the inline start when half the bar scrolls into view (a clip, so they never stretch)
spring.smooth

0.36s, bounce 0

0.36s, bounce 0
Reflowa new amount widens or narrows its cell and the bar
duration.slowease.standard

340ms · cubic-bezier(0.2, 0, 0, 1)

340mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

Drawn at its values; changes land at once.

Reduced motion

The cells are drawn at their widths, and a new amount lands at once.

AccessibilityKeyboard, focus, screen readers

Accessibility

  • A named group (your label, or the labels' "Cell bar") described by its total, the part that is projected and the target ("$9,710 in all. $3,540 of it projected. Target $6,240.").
  • The cells are a list; each is read with its period and amount, and says when it is projected ("Oct: $1,120, projected").
  • One tab stop. The arrow keys walk the cells (mirrored in RTL), Home and End go to the ends, and focus shows the same tooltip as hovering.
  • Projected cells are hatched as well as tinted, and the target is a dashed tick, so neither leans on color alone.
  • Its built-in text comes from the labels, so <YoujProvider labels> translates it.