Ravox KitDados
Donut Chart
Gráfico de rosca para mostrar quanto cada parte pesa no todo: formas de pagamento, canais, planos. O total fica no centro e vira o valor da fatia que a pessoa aponta ou escolhe pelo teclado; a legenda traz valor e porcentagem e o botão Ver tabela mostra os números.
Use as setas para ler cada parte, ou o botão Ver tabela.
TotalR$ 97.600
- PixR$ 48.23049%
- Cartão de créditoR$ 31.84033%
- Cartão de débitoR$ 12.41013%
- BoletoR$ 5.1205,2%
Ajustes
Exemplos
Planos dos clientes, com cor fixa por plano
Use as setas para ler cada parte, ou o botão Ver tabela.
Clientes754
- Essencial41255%
- Profissional26836%
- Empresa749,8%
Fina, com o resto em “Outros”
Use as setas para ler cada parte, ou o botão Ver tabela.
Total1.215
- Site54044%
- Instagram31026%
- WhatsApp22819%
- iFood967,9%
- Outros413,4%
Instalação
O shadcn cria components/ui/rosca.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/donut-chart.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| titulo | string | — | Título visível; também nomeia o gráfico para leitores de tela. |
| fatias | FatiaRosca[] | — | { rotulo, valor, cor? }. Cor: "azul" | "amarelo" | "rosa" | "lima" ou qualquer cor CSS. |
| formatar | (valor: number) => string | número pt-BR | Formata os valores (R$, %, unidades). |
| rotuloTotal | string | "Total" | O que aparece no centro acima do total. |
| tamanho | number | 180 | Lado do desenho em px. |
| espessura | number | 0.28 | Grossura do anel em fração do raio, de 0.1 a 0.5. |
| legenda | "lado" | "embaixo" | "lado" | Onde fica a legenda. |
| descricao | ReactNode | — | Linha abaixo do título (período, fonte). |
| alternarTabela | boolean | true | Mostra o botão Ver tabela. |