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

Prop	Type	Default	Description
title	string	-	Card header. Required.
subtitle	string	-	Secondary line under the title.
value	ReactNode	-	Headline figure displayed above the chart.
change	number	-	Percentage delta paired with the value.
chart	ReactNode	-	The chart node. Or pass it as children.
legend	Array<{label: string, color: string, value?: string}>	-	Inline legend below the chart.
actions	ReactNode	-	Top-right toolbar slot (timeframe, export…).
footer	ReactNode	-	Optional footer slot under the legend.
loading	boolean	false	Renders a skeleton in place of the chart.
empty	ReactNode	"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.