chart anatomy
Partes universais de qualquer chart. Todo gráfico bem construído tem essas peças nos mesmos lugares — vira linguagem comum entre quem lê.
anatomia anotada
- Título · resposta direta à pergunta que o chart responde · heading-02
- Subtítulo · unidade, período, fonte breve · label-01 mono
- Título do eixo Y · unidade ou variável · uppercase 9pt (rotacionado)
- Ticks Y · valores numéricos · mono 10pt right-aligned
- Gridlines · subtle (dashed) · apenas horizontais em bar/line
- Plot area · onde os dados moram · padding interno generoso (16-24px)
- Eixo X · labels de categoria ou tempo · mono 10pt center-aligned
- Annotation · destaque pontual (recorde, anomalia, meta) · cor de support quando crítico
título e subtítulo
Título responde a pergunta. Subtítulo dá contexto.
use
não use
eixos
eixo y
Comece em zero pra bar/area (truncar distorce). Line pode truncar se a variação for sutil — sempre indique.
eixo x
Tempo da esquerda pra direita. Categorias ordenadas por valor decrescente quando comparação.
gridlines
Só horizontais em bar/line. Tracejadas, cor --dv-gridline (subtle). Verticais só em scatter ou quando ajuda a leitura. Nunca grades duplas (X+Y juntos) — vira tabela.
legenda
Necessária quando há 2+ séries. Pode ficar abaixo do chart ou inline com direct labels.
use
não use
tooltip
Aparece on-hover (ou tap mobile). Mostra valor exato + label + comparação opcional.
demonstração · valores fictícios
fonte
Sempre cite a fonte dos dados. Texto pequeno (code-01) abaixo do chart. Quando interno, datar a query: // extração: 2026-05-19.
spacing
- Padding interno do chart: spacing-06 (24px)
- Distância título → plot: spacing-04 (12px)
- Distância plot → eixo X labels: spacing-03 (8px)
- Distância chart → fonte: spacing-04
- Spacing entre charts num dashboard: spacing-05 (16px)