Pie & Donut Charts

Partes de um todo — pie, donut, label, list, legend, active, interactive e sunburst.

A família Pie / Donut mostra partes de um todo (composição percentual). O componente é o PieChart; com arcWidth > 0 vira donut (anel). Use para 2–6 categorias que somam 100%.

Visão geral: Charts. Paleta: Chart Colors.

Demo interativa e API completa (props, eventos, slots) na API completa no EletroDS.
Pie Chart

Quando usar

Use o pie/donut para 2–6 categorias que somam um todo — distribuição de gastos por centro de custo, participação por fornecedor, status de uma carteira. Acima de 6 fatias, ou quando os valores são próximos demais para distinguir pela área, a leitura fica imprecisa: prefira barras.

O donut (anel) libera o miolo para um número-âncora — o total ou o item em foco — e por isso é a forma preferida em dashboards. A pizza cheia funciona quando não há um valor central a destacar e a composição é o único recado.

Pie / Separator / Labels

A pizza tem três ajustes de leitura que se acumulam conforme o número de fatias e o espaço disponível: o separador (stroke entre fatias) ajuda a distinguir cores vizinhas; os rótulos externos com risquinho nomeiam cada fatia sem poluir o centro; e o label list move os nomes para um painel lateral, indicado quando há muitos rótulos ou pouco espaço angular.

Pie Chart
Pie Chart — Separator
Pie Chart — Com rótulos
Pie Chart — Label List

Donut + text

O miolo do donut carrega um rótulo e um valor central — em geral o total da composição. É a variante de referência quando o número agregado importa tanto quanto a distribuição.

Donut Chart — With Text

Active

Clique numa fatia e ela cresce o raio externo e persiste em destaque; o centro passa a mostrar o item ativo. Use quando o usuário precisa fixar uma categoria para comparar ou inspecionar — a seleção fica até ele trocar.

Donut Chart — Active

Interactive

A fatia sob o cursor cresce e ganha uma faixa externa, e o centro mostra o item; ao tirar o cursor, volta ao estado neutro. É exploração passageira (hover), oposta à seleção persistente da Active — bom para varrer rapidamente sem fixar nada.

Pie Chart — Interactive

Sunburst (stacked)

Hierarquia em anéis concêntricos: o anel interno é a categoria-pai e o externo são os filhos (em tons do pai), alinhados dentro da fatia do pai. Use para mostrar categoria → subcategoria num só desenho — navegador → versões, departamento → centros de custo. Acima de dois níveis a leitura satura; aí prefira uma tabela ou drill-down.

Pie Chart — Sunburst

Guia rápido

ObjetivoVariante
Composição simplesPie
Com valor centralDonut + Text
Destacar uma fatia (clique)Active (selectable)
Explorar no hoverInteractive (growOnHover)
Hierarquia (categoria → sub)Sunburst (hierarchy)

Quando NÃO usar: muitas categorias (>6) ou valores próximos — prefira Bar.