# DotBars

A histogram built from dots, one column per day or step, with a highlighted range and an accent outlier.

- **Use it for**: Daily or per-step counts with a range to call out.
- **Not for**: Real axes, several series or negative values. Try [Chart](https://unseenui.com/components/chart/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { DotBars } from '@stackunseen/ui';
import { Numeric, Chart } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<DotBars label="Runs in October" data={days} range={{ start: 6, end: 19 }} rangeLabel="Oct 7 – 20 · 642 runs" axis={["Oct 1", "Oct 31"]} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `axis` | `readonly [string, string]` | Printed at the two ends of the axis: ['Oct 1', 'Oct 31']. |
| `data` (required) | `readonly DotDatum[]` | One column of dots per item, in order: days of a month, steps of a run. |
| `label` (required) | `string` | Names the figure for assistive technology and the hidden table. |
| `max` | `number` | The value that fills a column; defaults to the largest value present. |
| `outliers` | `readonly number[]` | Item indexes drawn in the accent colour, for the one that stands out. |
| `range` | `{ start: number; end: number; }` | Item indexes, inclusive, that read in full colour; the rest fade. |
| `rangeLabel` | `ReactNode` | Printed under the range: "Oct 7 – 20 · 642 runs". |
| `rows` | `number` | Dots per column. |
| `unit` | `string` | Unit for the hidden table, such as "runs". |

## Keyboard

Inert content; the hidden table is read in order.

## Works with

[Card](https://unseenui.com/components/card/), [Table](https://unseenui.com/components/table/), [Tag](https://unseenui.com/components/tag/), [DiffStat](https://unseenui.com/components/diff-stat/), [ElapsedTime](https://unseenui.com/components/elapsed-time/), [Numeric](https://unseenui.com/components/numeric/), [Kbd](https://unseenui.com/components/kbd/), [DotRing](https://unseenui.com/components/dot-ring/), [WeekStrip](https://unseenui.com/components/week-strip/), [HeatKeys](https://unseenui.com/components/heat-keys/), [Sparkline](https://unseenui.com/components/sparkline/), [BarList](https://unseenui.com/components/bar-list/)

Page: https://unseenui.com/components/dot-bars/