Share bar

Pro

Parts of one whole (coverage by source, spend by model) as a single stacked bar, with a legend that lists each part's value and share, so nothing depends on matching colours. Only the parts given with a value are drawn; one not measured (null, or a value that isn't a finite number) is listed as "Not measured", never drawn as zero.

With whole, shares are of it: parts that sum under it leave a hatched "Not accounted for" segment; parts that sum over it draw no shares at all and say they add up to more than the whole. Without whole, shares are of the parts' own total, and the legend says so; when a part isn't measured or is below zero, they are shares of the measured parts only, and the caption says how many were left out. Nothing is estimated to make it add up. Shares are rounded down to a tenth of a percent: only the whole reads 100%, and a part too small to reach 0.1% reads "<0.1%".

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/share-bar

Brings in: bidi, data, locale, pattern-fill, scale, tokens, utils

Usage

TSX · The example above

"use client"

import { ShareBar } from "@/components/candor/share-bar"

export default function Example() {
  return (
    <div className="flex max-w-md flex-col gap-6">
      <ShareBar
        label="Spend by model, this month"
        format="currency"
        parts={[
          { id: "large", label: "Large model", value: 412 },
          { id: "small", label: "Small model", value: 96 },
          { id: "embed", label: "Embeddings", value: null },
        ]}
      />
      <ShareBar
        label="Questions answered, by source"
        whole={1200}
        parts={[
          { id: "docs", label: "Help centre", value: 640 },
          { id: "tickets", label: "Past tickets", value: 310 },
        ]}
      />
    </div>
  )
}

<ShareBar>

Prop	Type	Default	Description
labelrequired	`string`	—	What the parts divide up, above the bar: "Spend by model".
partsrequired	`SharePart[]`	—	The parts, in order. Their labels are drawn as text, isolated, so a model's or a tool's name can't reorder the line.
whole	`number \| undefined`	—	The whole the parts are of, when it's known: shares are of it, and what the parts don't cover is shown. One that isn't a finite number is treated as not given.
format	`ValueFormat \| undefined`	"number"	How values are written: number, percent (0–1), currency (USD) or duration (seconds). Defaults to number.
patterns	`ChartPatternMode \| undefined`	"auto"	When each part carries a hatch pattern as well as a colour: `auto` (the default) under the high-contrast theme and in forced colours, `always`, or `never`.
className	`string \| undefined`	—	Classes for the root, merged with Candor's.

Strings

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

Key	English
notMeasured	Not measured
belowZero	Below zero; not drawn
notAccounted	Not accounted for
notAccountedValue	Not accounted for: {value}
over	The parts add up to {sum}, more than the whole ({whole}).
ofWhole	Shares of {whole}.
ofParts	Shares of the parts' total, {sum}.
ofMeasured	{ one: "Shares of the measured parts' total, {sum}; {count} part left out.", other: "Shares of the measured parts' total, {sum}; {count} parts left out.", }
under	<{share}
allZero	Every measured part is 0.
nothing	Nothing measured yet.

Types

SharePart: One part of the whole: its id, its words, and its measured value; `null` where it wasn't measured. A value that isn't a finite number (`NaN`, `Infinity`) is treated as not measured.; { id: string; label: string; value: number | null }

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"