Escolher o gráfico
Que gráfico responde a cada pergunta, biblioteca por stack e moldura
Tipos
Comece pela pergunta
O gráfico certo depende da pergunta que a pessoa quer responder. Os tipos abaixo são os que o Sinapse desenha.
| Pergunta | Gráfico | Cuidado |
|---|---|---|
| Como um valor muda ao longo do tempo? | Linha | Use para tempo contínuo, como semanas epidemiológicas ou meses. Mostre a mediana quando a comparação com o histórico importa. |
| Como duas séries se comparam ao longo do tempo? | Linha de comparação | Até três séries. Com mais, separe em gráficos menores lado a lado. |
| Como poucas categorias se comparam? | Barras verticais | Rótulos curtos. O eixo das barras sempre começa no zero. |
| Como muitas categorias, ou categorias com nomes longos, se comparam? | Barras horizontais | Ordene do maior para o menor, a não ser que a ordem seja natural, como faixas etárias. |
| Qual a parte de cada item no total? | Rosca | Até cinco fatias, com o total no centro. Para comparar fatias de tamanho parecido, prefira barras. |
| Entre que mínimo e máximo um valor varia? | Faixa | A legenda diz o que cada ponta representa. |
| Como dois grupos se distribuem por faixa? | Barras duplas | A pirâmide etária é o caso típico: zero no centro e valores positivos nos dois lados. |
| Como um valor varia em duas dimensões? | Mapa de calor | A escala de cor tem uma ordem clara de intensidade e aparece na legenda. |
Código
Biblioteca por stack
O Sinapse não tem biblioteca de gráficos própria. Cada stack usa a biblioteca do seu ecossistema shadcn, com as cores do tema.
| Stack | Biblioteca | Como usar |
|---|---|---|
| React e Next.js | Componente chart do shadcn, sobre Recharts | Instale o item chart do shadcn. Ele lê as cores --chart-* do tema Sinapse. |
| Vue 3 e Nuxt | Componente chart do shadcn-vue, sobre Unovis | Instale o item chart do shadcn-vue. Ele também lê as cores --chart-* do tema. |
| Astro e HTML | Unovis em TypeScript (@unovis/ts) | A mesma biblioteca do Vue, sem framework. Para um gráfico estático simples, um SVG feito à mão basta. |
A paleta de gráficos está em revisão com a área de design. Até a nova paleta sair, use as cores --chart-1 a --chart-5 do tema, nunca cores fixas no código.
Moldura
O que acompanha o gráfico
Nos painéis, o gráfico vive num card com partes fixas. Só o título é obrigatório; as outras partes entram quando o dado pede.
| Parte | Regra |
|---|---|
| Título | Sempre presente. Diz o que é medido, onde e quando: "Casos de dengue por semana, Brasil, 2026". |
| Indicadores | Cards acima do gráfico com o número principal, a variação em relação a um período de referência e uma ajuda sobre o cálculo. |
| Abas de visualização | Quando o mesmo dado pode ser visto de mais de uma forma. Cada aba troca o gráfico, não a página. |
| Aviso sobre os dados | Para limitações que mudam a leitura, como "o ano corrente pode conter dados parciais", com link para a nota completa. |
| Legenda | Quando há mais de uma série. Use rótulos diretos nas linhas quando couberem. |
| Link para a base de dados | Aponta para a fonte dos números exibidos. |
| Resumo em texto | Uma ou duas frases com a principal leitura do gráfico. Se o texto for gerado por IA, a interface diz isso. |