Gráficos

Área

Área mostra volume ao longo do tempo: uma série que acumula, ou séries que somam um total. Para comparar séries que não se somam, prefira linhas; para comparar categorias, barras.

Série única

Uma grandeza ao longo do tempo. Sem legenda: o título já diz o que está no gráfico.

Envelopes assinados por mês

Janeiro a outubro de 2026

5.069

Assinaturas concluídas por dia

1 a 17 de outubro de 2026

399

Empilhada

Camadas que somam um total. Cada camada tem linha de 2px no topo e 2px de respiro na cor da superfície. A versão 100% mostra a parcela de cada série, não o volume.

Envelopes por status

Criados entre 1 e 17 de outubro de 2026, pelo status atual

548

Participação dos canais de envio

Parcela de envelopes enviados por canal, janeiro a outubro de 2026

Interativa com período

O seletor de período fica no cabeçalho do quadro e recorta gráfico, total e tabela ao mesmo tempo.

Enviados e assinados

Últimos 30 dias, até 17 de outubro de 2026

459

Uso

const config = {
  signed: { label: "Assinados", color: "var(--color-chart-1)" },
  waiting: { label: "Aguardando assinatura", color: "var(--color-chart-2)" },
} satisfies ChartConfig;

<ChartContainer config={config} className="aspect-auto h-64 w-full">
  <AreaChart data={rows}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" tickLine={false} axisLine={false} tickMargin={8} />
    <YAxis tickLine={false} axisLine={false} width={32} />
    <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
    <ChartLegend content={<ChartLegendContent />} />
    <Area dataKey="signed" stackId="status" fill="var(--color-signed)" fillOpacity={0.24} stroke="var(--color-signed)" strokeWidth={2} />
    <Area dataKey="waiting" stackId="status" fill="var(--color-waiting)" fillOpacity={0.24} stroke="var(--color-waiting)" strokeWidth={2} />
  </AreaChart>
</ChartContainer>