Skip to content

Sparkline

<ax-sparkline> is a Pro component: a tiny inline trend chart (no axes) for tables, cards, and KPIs. It reuses the chart engine and is colored from the chart palette, so it auto-themes with the active preset. Self-gates with a PRO watermark until licensed.

import { AxSparklineComponent } from '@axisui-ng/charts';
<ax-sparkline [data]="[3, 7, 4, 9, 6, 10]" type="area" [showDot]="true" ariaLabel="Revenue" />
InputTypeDefaultNotes
datanumber[][]The series.
type'line' | 'area''line'Area adds a filled baseline under the line.
colorIndexnumber1Clamped to 1–5 → --color-chart-N stroke/fill.
showDotbooleanfalseMarker on the last point.
widthnumber120SVG width (px).
heightnumber32SVG height (px).
ariaLabelstring''Accessible name; empty → auto summary (count, trend, latest, range).

role="img" with aria-label from ariaLabel or an auto-generated series summary.

Pro component — see ProWatermark for how the watermark/gating works.

Interactive examples live in Storybook under Pro / Sparkline. Run pnpm storybook to explore them.