Ajax UI
Sign inGet started
Components/Analytics Card

Analytics Card

A larger dashboard card built around a chart. Slots for a headline value, delta, legend, and a toolbar (timeframe selectors, export buttons) — chart-library agnostic via the chart slot.

Active users

Last 30 days

48,294
12.4%
  • Web31.2k
  • Mobile17.1k

Installation

npx ajaxui add analytics-card

Minimal

Title and chart are the only required props. Everything else is optional.

Page views

Empty state

Omit chart and pass a custom empty node — the card shows it in the chart slot.

Sales by region

Last 7 days

No sales recorded in this window.

Loading

Revenue

Last 30 days

—

Bring your own chart

The card never imports a chart library. Pass a chart node (or default slot in Vue/Angular/Blazor) and use whatever library you prefer — Recharts, ECharts, Chart.js, the built-in Chart, etc.

<AnalyticsCard title="Revenue" value="$284k" change={8.2}>
  <Recharts.LineChart data={data}>...</Recharts.LineChart>
</AnalyticsCard>

Props

PropTypeDefaultDescription
titlestring—Card header. Required.
subtitlestring—Secondary line under the title.
valueReactNode—Headline figure displayed above the chart.
changenumber—Percentage delta paired with the value.
chartReactNode—The chart node. Or pass it as children.
legendArray<{label: string, color: string, value?: string}>—Inline legend below the chart.
actionsReactNode—Top-right toolbar slot (timeframe, export…).
footerReactNode—Optional footer slot under the legend.
loadingbooleanfalseRenders a skeleton in place of the chart.
emptyReactNode"No data"Rendered when there is no chart node.

Accessibility

  • The card uses a <section> labeled by the title — screen readers can jump between cards in a dashboard.
  • Legend entries are real text adjacent to color swatches — color is never the only signal.
  • The chart slot is expected to expose its own description (e.g. aria-label with a summary). The card does not override it.