Unit Chart · Youj

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 unit chart when the counts are small enough to see one by one and that matters: covers through a service, tickets by hour, signups by day. Each column is a bucket and each dot one unit, stacked from the baseline over a faint grid of every dot the chart could hold, so the empty room reads as part of the scale. For larger values, or a trend with tooltips on several series, use a Chart; for a distribution someone filters, a Histogram Range.

import { UnitChart } from '@youj/react'

<UnitChart
  label="Covers through the day"
  data={[
    { label: '11:30', value: 3 },
    { label: '11:45', value: 6 },
    { label: '12:00', value: 9 },
  ]}
  highlight={[1, 2]}
  formatValue={(v) => `${v} covers`}
/>

The grid is as tall as the peak with some headroom; pass rows to keep the scale still when the data changes. Labels sit under about six columns; tickEvery sets the step. highlight takes the first and last index of a range to keep in the tone, and the rest go quiet.

Reference

Propsdata, unit, rows, highlight… (8)

Props

UnitChart props
Prop	Type	Default
`data`Required	`readonly UnitChartBucket[]`	–
`unit`	`number` How much one dot counts for. default 1	`1`
`rows`	`number` The grid's height in dots. Default: the peak with some headroom; pass one to keep the scale still across data.	–
`highlight`	`readonly [number, number]` The first and last index of the buckets to keep in the tone; the rest go quiet.	–
`tone`	`UnitChartTone` `'accent''neutral''success''warning''danger''chart-1''chart-2''chart-3''chart-4''chart-5'` The lit dots' color. default 'accent'	`'accent'`
`formatValue`	`(value: number) => string` Formats values in the tooltip and the spoken text. Default: the locale's number format.	–
`label`	`string` Accessible name of the chart. Default: the labels' "Unit chart".	–
`tickEvery`	`number` Label every nth column. Default: about six labels across.	–
Other props pass through: extends `ComponentProps<'div'>`.

StylingParts and data attributes

MotionReveal, new data · reduced motion

Motion

Motion tokens
Moment	Tokens	Value
Revealthe dots light column by column from the start, each from the baseline up, when a third of the chart scrolls into view	`duration.deliberateease.standard` 560ms · cubic-bezier(0.2, 0, 0, 1)	560mscubic-bezier(0.2, 0, 0, 1)
New datadots that change light or darken in the same wave	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)
Hover and focusa band washes behind the column	`duration.fastease.standard` 140ms · cubic-bezier(0.2, 0, 0, 1)	140mscubic-bezier(0.2, 0, 0, 1)

Reduced motion

Drawn in place; new data lands at once.

Reduced motion

The dots are drawn in place, and new data lands at once.

AccessibilityKeyboard, focus