Data and analytics · §5.25

Trend chart

A measure over time with a crosshair tooltip.

Kind
Theme
Contrast
Language
Motion
Text size

Code

<ChartFrame summary={…} t={t} table={…} title="…"><TrendChart data={data} series={series} xKey="hour" /></ChartFrame>

Accessibility

  • A summary sentence above; "Show as table" gives the same data as a table.

Usage

Do

  • Categorical slots in fixed order.

Don't

  • One y-axis only.

Platforms

Web
apps/web/components/edflow/charts.tsx, apps/web/components/ui/chart.tsx
iOS
Swift Charts LineMark
Android
Vico line chart