Bar chart

Pro

Columns by category, grouped or stacked. Bars stay thin (24px at most) with a 4px rounded end and a 2px gap between neighbours; a missing value is a dashed stub at the baseline, never a zero-height bar. One series gets a value on each cap; several get a legend. Hover or focus a category for every series' value; the table view lists them all.

Markdown

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

Brings in: chart-frame, data, locale, scale, utils

Usage

TSX · The example above

"use client"

import { BarChart } from "@/components/bar-chart"
import type { Series } from "@/lib/data"

const repositories = ["api", "web", "billing", "workers", "infra", "docs"]

const tests: Series[] = [
  { id: "passed", label: "Passed", values: [212, 148, 96, 74, 31, 12] },
  { id: "failed", label: "Failed", values: [3, 0, 5, 1, 0, null] },
]

export default function Example() {
  return <BarChart className="max-w-xl" title="Tests by repository" subtitle="Stacked · last night’s CI run" categories={repositories} series={tests} stacked />
}

<BarChart>

Prop	Type	Default	Description
titlerequired	`string`	—	What the chart shows, above it.
subtitle	`string \| undefined`	—	A line under the title, e.g. the period or unit.
categoriesrequired	`string[]`	—	The column labels along the x axis.
seriesrequired	`Series[]`	—	One value per category per series; null draws a dashed stub.
stacked	`boolean \| undefined`	false	Stacks series in one column instead of grouping them side by side.
format	`ValueFormat \| undefined`	"number"	How values are written: number, percent (0–1), currency (USD) or duration (seconds). Defaults to number.
state	`ChartState \| undefined`	—	Loading, empty, partial or error. Defaults to ready.
height	`number \| undefined`	—	The plot's height in pixels. Defaults to 220.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

Key	English
noData	No data
noDataInline	no data
byCategory	{series} by category
category	{category}: {values}
seriesValue	{series} {value}