Funnel Chart for Angular

import { AuiFunnelChart } from '@absoluteui/angular/funnel-chart';

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

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

Example

import { Component } from '@angular/core';
import { AuiFunnelChart } from '@absoluteui/angular/funnel-chart';
import type { FunnelStage } from '@absoluteui/components/funnel-chart';

@Component({
  selector: 'app-checkout',
  imports: [AuiFunnelChart],
  template: `<aui-funnel-chart label="Checkout" [stages]="stages"></aui-funnel-chart>`,
})
export class CheckoutComponent {
  readonly stages: FunnelStage[] = [
    { id: 'visits', label: 'Visits', value: 1000 },
    { id: 'paid', label: 'Paid', value: 100 },
  ];
}

<aui-funnel-chart>

Class AuiFunnelChart; template reference #ref="auiFunnelChart".

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). Must not be blank.
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 (stage count, first and last stage, overall conversion, largest drop).
valueFormat	NumberFormatOptions		Number format for stage values in labels, accessible names, the tooltip, the data table, and the summary. Conversions are always percentages with at most one fraction digit.
formatValue	(value: number) => string		Custom value text; overrides valueFormat.
stages	readonly FunnelStage[]		Required. Stages in order: { id, label, value: number | null, color?: 1-8 }. Ids are unique and non-empty; values are non-negative; null, NaN, and infinities are a missing stage (read “No value”).
color	ChartColor	'1'	Palette slot for every stage without its own color.
legend	ChartLegendMode	'auto'	Shared chart configuration; a funnel never shows a legend (stages are labelled beside their bars).
dataTable	ChartTableMode	'toggle'	Data table fallback (Stage, Value, Of first stage, Of previous stage): 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 (value, of first stage, of previous stage).
patterns	boolean	false	Shared chart configuration; toggles the aui-chart–patterns host class. Funnel stages draw no textures (there is one series).
height	number	'300'	Plot height in CSS px (integer 120-2000), divided evenly between stages; the width follows the container.
showConversion	boolean	true	Print the conversion from the previous stage next to each stage value (“400 | 40%”). Accessible names, the tooltip, and the table always include conversions.
locale	string	'en-US'	Number, percent, and message locale.
direction	Direction	'ltr'	rtl moves stage names and values to the right side and swaps ArrowLeft/ArrowRight.

Two-way bindings

Model	Type	Change output	Description
[(hiddenSeries)]	readonly string[]	(hiddenSeriesChange)	Shared chart option; validated but has no effect (a funnel has no toggleable series).

Methods

Call them through a viewChild query or a template reference.

Method	Description
setSeriesVisible(id: string, visible: boolean): void	Shared chart method; re-renders but has no visible effect on a funnel. Emits no event.