Gráficos

Barras

Compare quantidades entre categorias ou meses. A barra parte sempre do zero, então o comprimento é o próprio valor. Para tendência ao longo de muitos pontos, prefira linhas.

Uma série

Uma cor só (chart-1) para todas as barras. O título nomeia a série, por isso não há legenda.

Envelopes enviados por mês

Janeiro a outubro de 2026

5.513

Envelopes assinados por mês

Rótulo só no maior valor do período

Envelopes por canal de envio

Barras horizontais para nomes de categoria longos

Signatários por envelope

Destaque na faixa mais comum; as demais ficam em cinza de contexto

2.310 com 2 signatários

Várias séries

Cada série recebe um slot da paleta categórica em ordem (chart-1, chart-2…). A cor segue a série: e-mail é chart-1 em qualquer gráfico de canal. Sempre com legenda e com a tabela como alternativa.

Envelopes por canal e mês

Barras agrupadas, 2px entre as barras do grupo

Envelopes que não chegaram à assinatura

Barras empilhadas: a altura total é a soma e os segmentos mostram a composição

444

Valores negativos

Alta e queda usam a escala divergente, nunca as cores de status. A linha de base marca o zero e a barra cresce a partir dela nos dois sentidos.

Variação de envelopes assinados

Diferença para o mês anterior, fevereiro a outubro de 2026

Uso

const config = { sent: { label: "Enviados", color: "var(--color-chart-1)" } } satisfies ChartConfig;

<ChartContainer config={config} className="aspect-auto h-64 w-full">
  <BarChart data={envelopesByMonth}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} domain={[0, 800]} ticks={[0, 200, 400, 600, 800]} interval={0} />
    <ChartTooltip content={<ChartTooltipContent hideIndicator />} />
    <Bar dataKey="sent" fill="var(--color-sent)" radius={[4, 4, 0, 0]} maxBarSize={24} />
  </BarChart>
</ChartContainer>