Radial Charts

Progresso e composição em arcos circulares — multi-anel, gauge de valor único e empilhado.

A família Radial Chart representa valores em arcos circulares — de gauges de progresso a múltiplos anéis concêntricos. Dois modos: multi-anel (uma série por anel) e gauge (valor único ou empilhado).

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

API completa no EletroDS

Interatividade: todas as variantes têm tooltip no hover sobre o arco e legenda opcional. O radial é desenhado em SVG, então a guia segue o cursor sobre o anel ou segmento focado. A acessibilidade (role="img" + tabela textual oculta) é automática.
Radial Chart

Quando usar cada variante

ObjetivoVariante
Comparar várias séries em paraleloMulti-anel (base / Label / Grid)
Progresso de um valor frente a um máximoText (gauge)
Indicador ou faixa de um único valorShape (gauge)
Composição de partes em meia-luaStacked (semicírculo)

Prefira o radial quando o foco é proporção em relação a um limite (quanto do todo já foi atingido), não comparação livre de magnitudes — para isso, use Bar Charts.

Multi-anel (base / Label / Grid)

Uma série por anel concêntrico — o arco preenchido corresponde a valor / máximo, com cantos retos. Use para comparar poucas séries lado a lado mantendo um referencial comum. Três acabamentos do mesmo gráfico:

  • Base — apenas os anéis. Leitura mais limpa quando os rótulos vivem na legenda.
  • Label — rótulo de texto dentro de cada anel; útil quando há espaço e poucos anéis.
  • Grid — grade polar (teia) ao fundo, para reforçar a escala em apresentações.
Radial Chart
Radial Chart — Label
Radial Chart — Grid

Text (gauge de progresso)

Arco que cresce a partir do topo sobre uma trilha de fundo, com número grande no centro e cantos arredondados. É a escolha para progresso vs. máximo (visitantes, metas, ocupação) onde o valor exato importa tanto quanto a proporção.

Radial Chart — Text

Shape (gauge sem arredondar)

Mesmo gauge, com cantos retos — o valor aparece como uma faixa angular sólida. Prefira-o a Text quando o número for grande (não percentual) ou quando o visual reto combinar melhor com o resto do dashboard.

Radial Chart — Shape

Stacked (semicírculo)

Séries empilhadas em meia-lua, com o total no centro e os nomes na base. Use para mostrar a composição de um total quando há espaço vertical limitado — o semicírculo ocupa metade da altura de um anel completo.

Radial Chart — Stacked

Quando não usar