Stat Card

Demo & usage

More examples

<sv-stat-card
  title="Active users"
  [value]="12840"
  [trendPercent]="-3.2"
  [sparkline]="series"
  linkLabel="View report"
  (linkClick)="open()" />

<sv-stat-card-pro
  title="Open tickets"
  [value]="42"
  variant="warning"
  [clickable]="true"
  (cardClick)="drillDown()" />

When to use

• Surfacing a single headline metric with its trend at the top of a dashboard.
• You want an inline sparkline and a semantic up/down trend chip.
• For many metrics at once, arrange several cards in a Widget Grid.

Async states

• loading
• error
• retry

Outputs

<sv-stat-card-pro>

Also in this family — SvStatCardProComponent from @styloviz-pro/stat-card.

Inputs

Outputs

Wire it to your API

This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.

<sv-stat-card
  [sparkline]="data.items()"
  [loading]="data.loading()"
  [error]="data.error()"
  (retry)="data.reload()"
/>

// This component reports its state but does not emit a query, so drive
// it from your own fetch and bind the three async inputs.
readonly items = signal<Row[]>([]);
readonly loading = signal(false);
readonly error = signal<SvDataError | null>(null);

async load(): Promise<void> {
  this.loading.set(true);
  this.error.set(null);
  try {
    this.items.set(await this.api.fetchRows());
  } catch (e) {
    this.error.set(toSvDataError(e));
  } finally {
    this.loading.set(false);
  }
}

• This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `sparkline`, `loading` and `error`.
• Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.

Full walkthrough: Connecting to a backend.

Customization & theming

• Four layouts plus optional inline sparkline.
• Trend chip colors follow the semantic palette.
• Format values with your own pipe before binding.
• Set `clickable` on `sv-stat-card-pro` to make the whole card an interactive button that emits `cardClick`.

Best practices

• Do: Pre-format large numbers (e.g. 12.8k, $48.2K) before binding to `value`.
• Do: Use `trendPercent` sign to drive color so up/down reads instantly.
• Don't: Don't pack more than one metric into a single card — split them.

Accessibility

• Values and trends are real text, not images.
• Sufficient contrast across variants and dark mode.
• A `clickable` card (Pro) exposes `role="button"`, is focusable, and activates on Enter/Space.
• Decorative icons and sparklines are hidden from assistive tech; loading state sets `aria-busy`.