Stat cards and sparklines
One metric with a sparkline, bars, a meter or a ring.
StatCardStatCardChart
StatCard shows one metric: a value summarized from your rows, a delta, and a small chart. chart chooses an area (the default) or line sparkline, bars, a meter of cells or a ring filling toward target, or none. aggregate decides how the resting value sums up the data: sum, mean, max or last.
Hover, touch and the keyboard inspect the sparkline, and the headline follows the inspected point. Null stays a visible gap. See Stat cards for every prop.
TypeScript
<StatCard
title="Revenue"
data={dailyKpis}
value="revenue"
x="date"
delta={0.124}
caption="vs last month"
/>