Chart style

Applies to every chart.

Palette

Theme

Appearance

Depth
Surface
Background

Reading & motion

Axis
Hover
Legend
Numbers
Loading
Empty
Using chart defaults

Docs

Install, API and guides

  • Getting started

Reference2

  • API reference
  • Motion & accessibility
API reference/Chart families

Stat cards and sparklines

One metric with a sparkline, bars, a meter or a ring.

  • StatCard
  • StatCardChart

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"
/>
PreviousCombo chartsNextHorizontal bars