Histogram for Angular

import { AuiHistogram } from '@absoluteui/angular/histogram';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Histogram page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { histogram: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiHistogram } from '@absoluteui/angular/histogram';

@Component({
  selector: 'app-latency',
  imports: [AuiHistogram],
  template: `<aui-histogram label="Response times" [values]="values" [bins]="thresholds"></aui-histogram>`,
})
export class LatencyComponent {
  readonly values: (number | null)[] = [120, 135, 160, 180, 210, 240, 250, 310];
  readonly thresholds: number[] = [100, 150, 200, 250, 300, 350];
}

<aui-histogram>

Class AuiHistogram; template reference #ref="auiHistogram".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Chart title: visible text and the accessible name of the plot (aria-labelledby).
hideLabel	boolean	false	Visually hide the title; it stays the accessible name.
description	string		Visible description below the title, also referenced by aria-describedby (text only).
summary	string		Replaces the generated accessible summary (aria-describedby).
valueFormat	NumberFormatOptions		Number format of bin boundaries (x axis ticks, bar labels, tooltips, table, summary) when binFormat is not set. Counts always use the plain locale number format.
formatValue	(value: number) => string		Custom text for bin boundaries (x axis ticks included) when binFormat is not set. Counts are not affected.
values	readonly (number | null)[]		Required. Raw values to bin; null, NaN, and infinities are ignored (counted as missing).
bins	number | "auto" | readonly number[]	'auto'	auto: Sturges’ rule on nice boundaries; a number (integer 1-500): about that many bins on nice boundaries; an array: 2-501 ascending thresholds (bin edges).
min	number		Lower edge of the binned domain (finite); with auto or count bins it becomes the exact first edge. Default: a nice boundary at or below the data minimum. Ignored for binning when bins is an array of thresholds (still validated). Values outside the bins are counted and named in the summary.
max	number		Upper edge of the binned domain (finite, greater than min); with auto or count bins it becomes the exact last edge. Default: a nice boundary at or above the data maximum. Ignored for binning when bins is an array of thresholds.
color	ChartColor	'1'	Palette slot 1-8 of the bars.
binFormat	NumberFormatOptions		Number format of bin boundaries (axis, labels, tooltips, table, summary). Default: formatValue, else valueFormat.
xAxis	{ label?: string; }		X axis title (also the first table column header; default “Bin”).
yAxis	ValueAxisInput		Count axis: title (default “Count”, always drawn), fixed domain (bars taller than max are clipped), and tick count (2-20). Only integer ticks are printed. includeZero is accepted but has no effect (the count axis starts at zero unless min is set).
legend	ChartLegendMode	'auto'	Accepted for the shared configuration; a histogram never shows a legend (the legend list stays empty and hidden).
dataTable	ChartTableMode	'toggle'	Data table fallback with the exact data: behind a Show data table button (built on first open), always visible, visually hidden (screen readers only), or none.
tooltip	boolean	true	Tooltip on pointer hover and keyboard focus.
patterns	boolean	false	Toggles the aui-chart–patterns host class; the single bar series draws no texture.
height	number	'300'	Plot height in CSS px (integer 120-2000); the width follows the container.
locale	string	'en-US'	Number and message locale.
direction	Direction	'ltr'	rtl mirrors the x axis (lowest bin at the right), puts the count axis on the right, and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Accepted and validated (string[]) for the shared chart contract; a histogram has one data set, so it has no effect.

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Inherited from the shared chart controller; no visible effect.