# Bar chart (goodtabs UI)

A plain SVG bar chart with a labelled axis, hairline grid and a text alternative.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/bar-chart.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/bar-chart`

## Usage

```tsx
import { BarChart } from "@/components/ui/bar-chart"

<BarChart title="Installs by week" axisLabel="Installs" data={data} highlight={4} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `{ label: string; value: number }[]` |  | One bar per entry, in order. |
| title | `string` |  | Names the chart, shown as caption and SVG title. |
| axisLabel | `string` |  | What the vertical axis measures. |
| highlight | `number` |  | Index of the one bar drawn in the brand colour. |
| format | `(value: number) => string` |  | Formats ticks and the text alternative. |

## When to use

- Comparing a handful of values across categories or periods
- A dashboard card that needs a real axis

## When not to use

- Many series or interactive tooltips: use a chart library
- A single number: use a stat card

## Notes for agents

- Plain SVG, server rendered, no chart library
- The SVG has role img, a title and a description that lists every label and value
- Bars start at zero. Values must be zero or above
- Keep the label short; at twelve bars the label is about 20px wide
- Brand is used for at most one bar, through highlight

## The maths

- The axis step is the smallest of 1, 2, 5 or 10 times a power of ten that is at least max / 4, so there are at most four gridline intervals.
- The top is ceil(max / step) × step, and a bar's height is value / top × plot height.
- Bar width is min(0.6 × slot, 28) where slot is plot width / bar count.

Docs: https://ui.goodtabs.co/components/bar-chart