z-uiDesign system
Gráficos

Pizza

Pizza e rosca mostram parte do todo. Use com até cinco fatias e diferenças que dá para ver de longe; o que passar disso vira Outros. Para comparar valores próximos ou acompanhar mudança no tempo, use barras ou linhas.

Pizza

Fatias separadas por 2px na cor da superfície. Rótulos diretos só nas fatias grandes.

Canais de envio

Janeiro a outubro de 2026

Fatias em ordem decrescente a partir do topo, no sentido horário. Cada fatia leva nome e parcela; a fatia sob o cursor cresce para acompanhar o tooltip.

Envelopes por tipo de documento

Sete tipos, os três menores agrupados em Outros

Rótulo de percentual só nas fatias com 10% ou mais; o restante está no tooltip e na tabela.

Assinaturas por tipo

Janeiro a outubro de 2026

Com três fatias, nome e percentual vão direto na fatia, com linha-guia, e a legenda pode sair.

Rosca

O centro guarda o total ou o valor em foco, em cor de texto, nunca na cor da série.

Canais de envio

Janeiro a outubro de 2026

E-mail e WhatsApp somam 85% dos envios.

Canal em destaque

Escolha um canal na lista ou clique na fatia

E-mail: 56,1% dos envios.

Assinaturas por tipo

Fatias espaçadas e com cantos arredondados

padAngle e cornerRadius substituem o contorno na cor da superfície.

Tempo até a assinatura

Do envio à última assinatura, janeiro a outubro de 2026

Faixas ordenadas usam a escala sequencial: quanto mais intenso, mais demorado.

Divisórias e tons

As divisórias entre as fatias são configuráveis pela prop dividers do ChartPie (padrão true). Use o seletor de cada exemplo para alternar. Os modelos monocromáticos usam chartTones para gerar tons de uma única cor.

Canais de envio

Sem divisórias: as fatias encostam umas nas outras

Sem divisórias, a separação depende só da diferença entre as cores; funciona com a paleta categórica, que já foi validada para fatias vizinhas.

Envelopes por tipo de documento

Uma cor só, em tons: o maior volume no tom mais forte

Tons de uma cor deixam o gráfico calmo e ordenam as fatias por volume. Tons vizinhos ficam parecidos, então aqui as divisórias ajudam; desligue para ver a diferença.

Assinaturas por tipo

Rosca em tons de uma cor

Variações

Meia rosca para cartões baixos e anéis aninhados quando uma categoria se divide em tipos.

Canais de envio

Meia rosca, para cartões baixos

Documentos por categoria e tipo

Anel interno: a categoria. Anel externo: os tipos dentro de cada categoria.

Cada tipo usa um tom da cor da sua categoria, então o anel externo continua lendo como parte do interno.

Uso

const config = {
  email: { label: "E-mail", color: "var(--color-chart-1)" },
  whatsapp: { label: "WhatsApp", color: "var(--color-chart-2)" },
} satisfies ChartConfig;

const slices = channels.map((item) => ({ ...item, fill: `var(--color-${item.channel})` }));

<ChartContainer config={config} className="aspect-auto h-72 w-full">
  <PieChart>
    <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="channel" />} />
    <ChartPie data={slices} dataKey="value" nameKey="label" outerRadius={96}
      stroke="var(--color-bg-surface)" strokeWidth={2} />
  </PieChart>
</ChartContainer>