Sparkline for Angular

import { AuiSparkline } from '@absoluteui/angular/sparkline';

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

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

Example

import { Component } from '@angular/core';
import { AuiSparkline } from '@absoluteui/angular/sparkline';

@Component({
  selector: 'app-kpi',
  imports: [AuiSparkline],
  template: `<p>Sign-ups 230 <aui-sparkline label="Weekly sign-ups" [values]="trend"></aui-sparkline></p>`,
})
export class KpiComponent {
  readonly trend = [120, 132, 150, 170, 230];
}

<aui-sparkline>

Class AuiSparkline; template reference #ref="auiSparkline".

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

Inputs

Input	Type	Default	Description
label	string		Required. What the values are, for example “Revenue, last 12 months”; starts the accessible name.
values	readonly (number | null)[]		Required. Values in order; null, NaN, and infinities are gaps.
variant	SparklineVariant	'line'	Line or bars (bars include zero and draw negatives below a baseline).
color	SparklineColor	'1'	Palette slot (color-chart-<n>).
min	number		Fixed domain minimum (for comparable sparklines).
max	number		Fixed domain maximum.
valueFormat	NumberFormatOptions		Number format for the accessible name.
formatValue	(value: number) => string		Custom value text for the accessible name.
valueText	string		Replaces the generated accessible name.
highlightLast	boolean	true	Mark the last value (dot for line, full opacity for bar).
locale	string	'en-US'	Number, date, and message locale.
direction	Direction	'ltr'	rtl mirrors the category/x axis, the value axis side, and Left/Right arrow keys.