◇

Histogram

2 parts

A headless, accessible per-channel image histogram. The root owns the bin data (single-channel number[] or a per-channel record), normalises each channel against its own peak under the chosen scaleType ('linear' or 'log'), and provides the resulting [0, 1] bar heights to HistogramBars. It is a dense visual: the rendered bars are aria-hidden, while the root carries role="img" with an aria-label summary (or role="group"). The all-zero / empty guard is built in — a flat or empty histogram projects to zero height (no divide-by-zero, no NaN) and the summary label reports "no data". Pair it with LevelsRoot for a Photoshop-style levels editor, or use it standalone to visualise tonal distribution.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  HistogramRoot,
  HistogramBars,
} from '@robonen/primitives/canvas/histogram';

<HistogramRoot>
  <HistogramBars />
</HistogramRoot>

API Reference

HistogramRoot

Root

A headless, accessible per-channel image histogram. The root owns the bin `data` (single-channel `number[]` or a per-channel record), normalises each channel against its own peak under the chosen `scaleType` (`'linear'` or `'log'`), and provides the resulting `[0, 1]` bar heights to `HistogramBars`. It is a dense visual: the rendered bars are `aria-hidden`, while the root carries `role="img"` with an `aria-label` summary (or `role="group"`). The all-zero / empty guard is built in — a flat or empty histogram projects to zero height (no divide-by-zero, no `NaN`) and the summary label reports "no data". Pair it with `LevelsRoot` for a Photoshop-style levels editor, or use it standalone to visualise tonal distribution.

Prop	Type	Default	Description
`data`?	`HistogramData`	`[]`	Bin counts. A single `number[]` is interpreted as the channel named by `channel`; a record carries any subset of `'r'`/`'g'`/`'b'`/`'l'`.
`channel`?	`HistogramChannel`	`'l'`	Primary channel. `'rgb'` is the composite (all three primaries overlaid); the others are single channels. `HistogramBars` defaults to this channel.
`bins`?	`number`	`256`	Requested bin count (the rendered bar count follows the supplied data).
`scaleType`?	`HistogramScaleType`	`'linear'`	Bar-height mapping.
`disabled`?	`boolean`	`false`	Disable / dim the histogram (purely presentational — it has no interaction).
`group`?	`boolean`	`false`	Use `role="group"` instead of the default `role="img"`. Reach for it when the bars are themselves interactive descendants.

HistogramBars

Bars

Renders the per-channel bars of the enclosing `HistogramRoot` as a dense, `aria-hidden` visual. Supply a single `channel` to draw one channel, or omit it to draw every primary the root's `channel` requests (the three primaries for `'rgb'`, otherwise the single resolved channel). Each rendered bar group carries `data-channel` and a `--histogram-color` hint; bar heights come from the root's projection (already normalised to `[0, 1]` with the all-zero guard, so they are `0` — never `NaN` — for an empty histogram). The default slot receives the per-bar `{ channel, heights }` so consumers own the paint.

Prop	Type	Default	Description
`channel`?	`HistogramBarChannel`	—	Draw a single channel. Omit to draw every channel the root requests.