AreaChart
Volume ao longo do tempo; empilhamento mostra partes do todo.
AreaCharttendênciacomposição
Quando usar
Enfatizar magnitude acumulada ou composição temporal.
Quando evitar
Séries que se cruzam demais — a área empilhada confunde.
Cenário ilustrativo
Tráfego de campanhas (orgânico vs pago, ilustrativo).
Variações
- simples
- empilhada
Interações
- tooltip
- stack-toggle
- legend-toggle
Importação
import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart"
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts"Demonstração
Carregando…
Tema no header · prefers-reduced-motion desativa animação das séries.