# ASCII Column Chart

> Vertical bars stacked from square shade blocks, grouped by label, that build up block by block.

Category: Charts. Docs: https://asciicn.sumak.dev/docs/ascii-column-chart

## Installation

```bash
npx shadcn@latest add @asciicn/ascii-column-chart
```

Needs the `@asciicn` registry in components.json: `"registries": { "@asciicn": "https://asciicn.sumak.dev/r/{name}.json" }`.

## Usage

```tsx
import { AsciiColumnChart } from "@/components/ascii/ascii-column-chart"

<AsciiColumnChart
  label="Deploys per month"
  labels={["Jan", "Feb", "Mar", "Apr"]}
  series={[{ label: "deploys", data: [42, 58, 51, 77] }]}
/>
```

## Examples

### Grouped series

Pass several series to put bars side by side, one column of blocks each.

```tsx
<AsciiColumnChart
  label="Signups"
  labels={["Q1", "Q2", "Q3", "Q4"]}
  series={[
    { label: "2025", data: [120, 160, 140, 210], className: "text-muted-foreground" },
    { label: "2026", data: [180, 220, 260, 310] },
  ]}
  height={8}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `series` | `{ label, data, className? }[]` |  | One bar per series in each group. `className` colours it; otherwise primary, amber, sky and destructive in turn. |
| `labels` | `string[]` |  | One per group, shown under it and in the readout. |
| `label` | `string` |  | Names the chart for screen readers and captions its data table. |
| `height` | `number` | `10` | Plot height in cells. |
| `glyphs` | `string` | `"shade"` | How the cells look: `shade`, `hash`, `dollar`, `diamond` or `circle`, or any five glyphs from empty to the highlighted cell, e.g. `"·-=#@"`. |
| `max` | `number` | `largest value` | Fix the top of the scale. Bars start at 0. |
| `format` | `(v) => string` | `String` | Formats axis ticks, the readout and the data table. |
| `animate` | `boolean` | `true` | Bars rise from the baseline one after another the first time the chart scrolls into view. |

## Notes

- **Accessibility.** A focusable group named by `label`. Arrow keys move between groups, Home and End jump to the ends, Escape clears, and a live region reads the values. A visually hidden table holds every bar.
- **Blocks.** Every cell is a glyph clipped to a 1ch square, like the heatmap. With the default `shade` look, whole cells are `▓`, a part-filled top is `▒` or `░`, empty track is a dim `·`, and the scrubbed group turns solid `█` while the rest fade back. Other looks swap in their own five glyphs, so `dollar` stacks `$` with `.` and `¢` for a part-filled top.
- **Glyphs.** `columnGlyphs` is exported. Add your own preset to it, or pass a five-glyph string straight to `glyphs`. Pick glyphs your font has, since a fallback font may draw them at another size.
- **Motion.** Bars stack up one block at a time from the baseline, 40ms per block, each bar starting 30ms after the last (capped at 360ms). Off under `prefers-reduced-motion`.
- **Sizing.** Cells scale with the font size, so set `text-sm` or larger for chunky blocks. Labels that would collide are thinned out.
- **Bar chart.** For horizontal bars with labels on the left, use `AsciiBarChart` from ASCII Chart.
- **Dependencies.** `motion` for the entrance and transitions.