MiHCM
data/@mihcm/ui·v0.21.0·stable

SparkChart

Small D3-backed trend chart for dense KPI rows, table cells, and dashboard cards.

Inline trend

Use SparkChart inside KPI cards when trend evidence matters but axes do not.

Hiring velocity

Offer acceptance

Time to approve

<SparkChart data={[12, 18, 16, 25, 31, 29, 42]} showArea showDots label="Monthly hiring trend" />

Independent area, line, and dot colors

Use areaTone, lineTone, and dotTone when the area fill, line, and dots need different semantic colors.

Retention trend

<SparkChart
  data={[18, 21, 19, 28, 34, 31, 39]}
  showArea
  showDots
  areaTone="accent"
  lineTone="success"
  dotTone="warning"
  label="Custom trend colors"
/>