Ravox KitDados
Gráfico
Barras, linhas, área e barras empilhadas em SVG próprio, num eixo só. Tooltip no ponteiro e nas setas do teclado, legenda, rótulo no fim da linha e os mesmos números em tabela. Cores da casa ajustadas e validadas para daltonismo. Sem biblioteca de gráfico.
- Receita
- Despesa
Use as setas para a esquerda e para a direita para ler cada ponto, ou o botão Ver tabela.
Ajustes
Tipo
Séries
Exemplos
Empilhado: o todo e as partes
- Site
- App
- Balcão
Use as setas para a esquerda e para a direita para ler cada ponto, ou o botão Ver tabela.
Uma série, muitos pontos
Use as setas para a esquerda e para a direita para ler cada ponto, ou o botão Ver tabela.
Cor fixa por entidade
- Despesa
- Marketing
Use as setas para a esquerda e para a direita para ler cada ponto, ou o botão Ver tabela.
Uma série, sem grade
Use as setas para a esquerda e para a direita para ler cada ponto, ou o botão Ver tabela.
Instalação
O shadcn cria components/ui/grafico.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/grafico.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| tipo | "barras" | "linhas" | "area" | "empilhado" | "barras" | Barras comparam categorias; linhas e área mostram o tempo; empilhado mostra o todo e as partes. |
| dados | T[] | — | Um item por ponto do eixo X, com os números de cada série: { mes: "jan", receita: 48200 }. |
| x | keyof T | — | A chave do rótulo do eixo X (ex.: "mes"). |
| series | { chave, rotulo, cor? }[] | — | Até 4. Sem cor, seguem a ordem azul, amarelo, rosa, lima (a cor fica com a série, não com a posição). |
| titulo | string | — | Título visível; também dá nome ao gráfico para leitores de tela. |
| descricao | string | — | Linha de apoio embaixo do título (período, unidade). |
| tituloX | string | — | Nome da coluna do X na tabela (ex.: "Mês"). |
| altura | number | 240 | Altura da área do gráfico com os eixos, em px. A largura acompanha o espaço. |
| formatar | (v: number) => string | — | Valores no tooltip, na tabela e no fim da linha (ex.: moeda). |
| formatarEixo | (v: number) => string | compacto | Números do eixo Y. Padrão: 1,2 mil, 3,4 mi. |
| legenda | boolean | true com 2+ séries | Legenda embaixo do título. Com uma série, o título já diz o que é. |
| grade | boolean | true | Linhas de grade horizontais (a linha do zero fica sempre). |
| rotuloFim | boolean | true | Linhas e área: o último valor ao lado do fim da linha. Some sozinho quando os rótulos se atropelam. |
| alternarTabela | boolean | true | Botão "Ver tabela": os mesmos números em uma Tabela. |
| --grafico-azul · -amarelo · -rosa · -lima | CSS | — | Troque as cores das séries no seu CSS. Os padrões são passos das cores do mosaico para gráfico, validados para daltonismo e com 3:1 sobre o cartão nos temas claro e escuro. |