Components / Rate Chart

Rate Chart

A compact area chart for percentage rates over time inside a Card size sm, with a gradient fill under the line.

import { RateChart, type RateDataPoint } from '@layers/ui/rate-chart'

Rendered stock

House rules

  • Values are percentages: the axis and tooltip append the % sign, so pass 6.4 for 6.4%.
  • It renders its own Card size sm; drop it straight into a stats grid with no extra wrapper card.
  • Use RateChart for rates (area) and TrendChart for counts (bars).
  • isLoading renders a Skeleton in place of the chart.

See also