z-uiDesign system
Gráficos

Visão geral

Os gráficos do z-ui usam Recharts dentro de um wrapper que liga cores, grade, tooltip e legenda aos tokens do tema. A mesma configuração funciona no tema claro e no escuro.

A base

Três peças, sempre juntas. Nenhuma cor é escrita no gráfico: tudo vem do config e dos tokens.

  • ChartContainerEnvolve o gráfico do Recharts, já traz o ResponsiveContainer e pinta grade, eixos, cursor e trilhas com os tokens de gráfico. A altura vem do className.
  • ChartConfigMapa de série para rótulo e cor. Cada chave vira a variável --color-{chave} dentro do container, e o dataKey precisa ser igual à chave.
  • Tooltip e legendaChartTooltipContent e ChartLegendContent leem o config para mostrar rótulos e cores, com valor em destaque e nome em segundo plano.

Envelopes assinados por mês

Janeiro a outubro de 2026

5.069
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "@/components/zui";

const config = {
  signed: { label: "Assinados", 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} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="signed" fill="var(--color-signed)" radius={[4, 4, 0, 0]} maxBarSize={24} />
  </BarChart>
</ChartContainer>

Paleta categórica

Oito slots para séries que são o assunto do gráfico. A ordem é fixa: a primeira série usa o slot 1, a segunda o slot 2, e assim por diante, sem pular nem reordenar.

  1. Slot 1--color-chart-1
  2. Slot 2--color-chart-2
  3. Slot 3--color-chart-3
  4. Slot 4--color-chart-4
  5. Slot 5--color-chart-5
  6. Slot 6--color-chart-6
  7. Slot 7--color-chart-7
  8. Slot 8--color-chart-8
  • De 1 a 3 séries, a cor sozinha basta. Com 4 ou mais, rotule as séries direto no gráfico além da legenda.
  • Mapas, dispersão e bolhas comparam todas as cores entre si: no máximo 3 séries. Acima disso, agrupe em “Outros” ou divida em gráficos pequenos.
  • Passou de 8 séries, não invente uma nona cor: agrupe a cauda em “Outros” ou troque por tabela.

Escala sequencial

Um só matiz, do claro ao escuro: mais é mais escuro. É o padrão seguro para magnitude, como volume por UF ou assinaturas por horário.

1234567
MenosMais

Tokens --color-scale-seq-1 a --color-scale-seq-7. Com 5 faixas, use os passos 1, 2, 4, 6 e 7.

Escala divergente

Dois matizes opostos e um centro neutro. Serve para sinal: variação contra o mês anterior, desvio de uma meta, saldo positivo ou negativo.

−3−2−10+1+2+3
AbaixoNeutroAcima

Tokens --color-scale-div-neg-3 a --color-scale-div-neg-1, --color-scale-div-mid e --color-scale-div-pos-1 a --color-scale-div-pos-3. O centro sempre representa “sem mudança”.

Regras

  • Um eixo Y sóMeta, previsão e média entram na mesma escala da série. Para comparar grandezas diferentes, use dois gráficos ou indexe as duas a 100.
  • Legenda com 2+ sériesUma série dispensa legenda: o título já diz o que está no gráfico. Com duas ou mais, a legenda está sempre presente.
  • Cor segue a entidadeE-mail é sempre o slot 1, WhatsApp sempre o 2. Filtrar uma série não repinta as outras.
  • Status é reservadoSucesso, alerta e perigo só aparecem quando a cor significa bom ou ruim, como a variação de um indicador. Série comum usa a paleta categórica.
  • Tabela como alternativaTodo gráfico com mais de uma cor tem a mesma informação em tabela. O tooltip complementa, nunca é o único caminho até o valor.
  • Texto nunca usa a cor da sérieRótulos e valores usam os tokens de texto. A identidade vem da amostra ao lado, não do texto colorido.

Índice

Cada página mostra os modelos daquela forma, com dados de envelopes e signatários.