Mini bar

Pro

A word-sized bar for a table cell, beside Sparkline: one measured value against its scale, filled from the start edge (the right, in a right-to-left language). It reads "{label}: {value} of {max}". A missing value draws no bar and says "No data", never an empty bar that reads as zero. A value outside the scale fills to the end it passed, and its name keeps the value as measured.

Markdown

Version 5.2.0· other versions

This page is for 5.2.0, the current release. An earlier release’s page is the Markdown that release published, so the docs match the version you have installed (candor-lock.json records it).

Not in the docs of 1.3.0, 1.4.0, 1.5.0, 1.5.1, 1.6.0, 1.7.0, 1.8.0, 1.8.1, 1.9.0, 1.9.1, 2.0.0, 2.1.0, 2.2.0, 2.3.0, 2.4.0, 2.5.0, 2.5.1, 2.6.0, 2.6.1, 2.6.2, 2.7.0, 2.8.0, 2.9.0, 2.10.0, 3.0.0, 4.0.0, 4.0.1, 4.0.2 and 4.1.0: the page came later, or had another name then.

Docs pages weren’t kept for 1.0.0, 1.0.1, 1.1.0, 1.1.1, 1.2.0 and 1.2.1: they are kept from 1.3.0 on, and before that only llms.txt was published.

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/mini-bar

Brings in: bidi, data, locale, scale, tokens, utils

Usage

TSX · The example above

"use client"

import { MiniBar } from "@/components/candor/mini-bar"

const repos: { name: string; failed: number | null }[] = [
  { name: "api", failed: 12 },
  { name: "web", failed: 4 },
  { name: "billing", failed: null },
  { name: "workers", failed: 0 },
]

export default function Example() {
  return (
    <ul className="flex max-w-xs flex-col divide-y rounded-xl border bg-card px-4">
      {repos.map((r) => (
        <li key={r.name} className="flex items-center justify-between gap-4 py-2 text-sm">
          <span className="font-mono text-xs">{r.name}</span>
          <MiniBar value={r.failed} max={20} label={`Failed runs this week, ${r.name}`} showValue />
        </li>
      ))}
    </ul>
  )
}

<MiniBar>

Prop	Type	Default	Description
valuerequired	`number \| null`	—	The measured value; `null` where there's none.
maxrequired	`number`	—	The scale's end: a full bar.
min	`number \| undefined`	0	The scale's start: an empty bar. Defaults to 0.
labelrequired	`string`	—	What the value is, read by assistive tech: "Failed runs, api".
format	`ValueFormat \| undefined`	"number"	How values are written: number, percent (0–1), currency (USD) or duration (seconds). Defaults to number.
width	`number \| undefined`	64	The bar's width in pixels. Defaults to 64.
showValue	`boolean \| undefined`	false	Writes the value beside the bar.
className	`string \| undefined`	—	Classes for the root, merged with Candor's.

Strings

The fixed words, in English by default. Change any of them under miniBar in <LocaleProvider strings={{ … }}>; the table is exported as miniBarStrings.

Key	English
name	{label}: {value} of {max}
noData	{label}: no data
noDataShort	No data

Types from other items

The props above take these. Each is defined by another item; import it from the path shown.

ValueFormat from @/lib/candor/data: "number" | "percent" | "currency" | "duration"