SVG Donut Chart

Donut charts em SVG: matemática, técnica e quando usar

Um donut chart é um gráfico de pizza com o miolo removido — tipicamente um furo em 50% a 70% do raio. O espaço central é mais que decoração: oferece um local para o valor total, um rótulo de unidade, um ícone ou uma marca, e é por isso que donuts dominam KPI cards e dashboards executivos. A UI de fitness do Apple Watch empilha três donuts concêntricos (Movimentar, Exercitar, Ficar de Pé) em um resumo de saúde imediato.

Há duas técnicas comuns em SVG. A primeira usa um <path> por fatia com comandos de arco explícitos. A segunda — mais simples e idiomática para donuts de duas fatias — usa um único <circle> com stroke-dasharray e stroke-dashoffset. O comprimento do arco segue a fórmula 2π · r · (percentual / 100).

<svg viewBox="0 0 42 42" width="120" height="120">
  <circle cx="21" cy="21" r="15.9" fill="none"
          stroke="#e5e7eb" stroke-width="6"/>
  <circle cx="21" cy="21" r="15.9" fill="none"
          stroke="#3b82f6" stroke-width="6"
          stroke-dasharray="60 40" stroke-dashoffset="25"
          transform="rotate(-90 21 21)"/>
</svg>

Donut vs pizza vs barra

Edward Tufte e Stephen Few são notoriamente céticos com pizzas e donuts: o olho humano compara comprimentos de barra com muito mais precisão do que ângulos ou áreas circulares. A regra prática é usar donut/pizza só para 2 a 3 categorias, quando o objetivo é parte-todo com ênfase e quando um único insight importa mais do que comparação precisa. Para quatro ou mais fatias, um gráfico de barras horizontais quase sempre comunica melhor. Para parte-todo hierárquico, um treemap escala mais.

Bibliotecas e ecossistema

D3.js é o padrão da indústria, com d3.arc() e d3.pie() como helpers principais. O Chart.js entrega um doughnut chart em uma linha. ECharts (Baidu) e AntV (Alibaba) são alternativas populares do ecossistema chinês, com defaults sólidos. Ferramentas no-code como Datawrapper, Flourish e Observable produzem donuts embedáveis a partir de um CSV em segundos.

Variantes: stacked, meio donut, gauge

O stacked donut renderiza vários anéis concêntricos, cada um representando uma série independente — o padrão do Apple Watch. O meio donut (semicírculo) economiza espaço vertical e funciona bem em KPI cards mobile. A variante gauge usa um arco de −90° a 90° para mostrar uma porcentagem única, comum em dashboards de performance. Animações costumam ser um crescimento horário a partir das 12h, facilmente produzido interpolando stroke-dashoffset da circunferência total até o valor alvo.

Perguntas frequentes

Donut ou pizza — qual a diferença prática? O furo central. Se você precisa exibir o total, uma unidade ou um ícone no centro, donut vence. Sem conteúdo central e querendo área máxima para as fatias, pizza serve.

E se eu tiver mais de três fatias? Reconsidere o gráfico. Com quatro ou mais categorias, um gráfico de barras horizontais ordenado é mais preciso. Se precisar manter o donut, agrupe fatias pequenas em "Outros" e rotule só as principais.

Preciso de legenda? Sim, a menos que as fatias estejam rotuladas diretamente. Combine cores com rótulos de texto — cor sozinha falha para usuários daltônicos. Use uma paleta categórica segura, como Tableau 10 ou d3.schemeCategory10.

Como deixar o SVG acessível? Adicione role="img" e um aria-label resumindo os dados (por exemplo, aria-label="60% concluído, 40% restante"). Para donuts interativos, exponha cada fatia como elemento focável com seu próprio rótulo.