Chart
Simple charts that follow the Paper Cut elevation budget — let one container own elevation, keep the chart content clean.
Basic Usage
Use ChartContainer as a standalone surface (Level 3), and keep the chart to one clear message.
Sparkline Cards
Compact embeds: the Card owns elevation, and the chart stays flat.
Weekly Activity
35 hrs
Page Views
12.4k
Bounce Rate
24.3%
Container Variants
Elevation is a container decision. Use inset/flat when nesting inside a Card.
Default (Level 3)
Section (Level 2)
Inset (Level 1, nested)
Flat (Level 1, embed)
Sparkline
Use flat for minimal embeds
Anti-patterns
Avoid stacking elevation: don't put a Level 3 chart surface inside another elevated container.
❌ Double elevation
Default ChartContainer inside a Card
✅ Inset inside
Use variant="inset" when nested