Gráficos

Linhas

Mostre como um valor muda ao longo do tempo. A linha liga pontos em sequência, então o eixo X precisa ser ordenado, como dias ou meses. Para comparar categorias soltas, prefira barras.

Uma série

Linha de 2px em chart-1. O título nomeia a série e o tooltip mostra o valor do ponto mais próximo do cursor.

Tempo médio até a assinatura

Por dia, 1º a 17 de outubro de 2026

6,4 h

Envelopes assinados por mês

Com pontos: cada mês é uma medição, e o ponto marca onde ela está

Envelopes aguardando assinatura

Em degrau: o total vale até a próxima contagem, no fim de cada dia

Taxa de conclusão

Assinados sobre enviados. Rótulo só no último mês

Comparação

Várias séries no mesmo eixo só quando medem a mesma coisa na mesma escala. Medidas diferentes viram dois gráficos, nunca dois eixos Y.

Envelopes por canal de envio

Uma linha por canal, com legenda. E-mail é chart-1 como nas barras

Tempo médio contra a meta

A meta é uma linha de referência no mesmo eixo, não uma segunda série

Interativa

Um seletor troca a série exibida. Uma série por vez, sempre em chart-1, e o eixo Y se ajusta ao maior valor da série escolhida.

Envelopes por situação

Assinados por mês, janeiro a outubro de 2026

5.069

Uso

const config = { hours: { label: "Tempo médio", color: "var(--color-chart-1)" } } satisfies ChartConfig;

<ChartContainer config={config} className="aspect-auto h-64 w-full">
  <LineChart data={signingHoursByDay}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="day" tickLine={false} axisLine={false} />
    <YAxis tickLine={false} axisLine={false} domain={[0, 10]} ticks={[0, 2.5, 5, 7.5, 10]} interval={0} />
    <ChartTooltip content={<ChartTooltipContent hideIndicator />} />
    <Line dataKey="hours" type="monotone" stroke="var(--color-hours)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>