interaction
Padrões de interação em charts: hover/tooltip, legend toggle, drill-down, brush selection, time range. Toda interação deve ter equivalente acessível via teclado.
hover & tooltip
Tooltip aparece on-hover (desktop) ou tap (mobile). Conteúdo: label + valor exato + comparação opcional. Passa o mouse no chart abaixo.
demonstração interativa
legend toggle
Clique na legenda esconde/mostra a série. Visual: opacidade 0.3 quando "off". Implementação JS opcional — em SVG nativo, usar display: none ou opacity.
drill-down
Click numa barra/fatia abre detalhamento. Usar quando há hierarquia (mês → semana → dia). Sinalize com cursor pointer + tooltip "clica pra detalhar".
brush selection (range)
Em line charts longos, brush no eixo X permite zoom em sub-range. Mostra o range selecionado destacado, resto fica fade. Equivalente teclado: input de date range acima.
time range selector
Quando dashboard tem múltiplos charts com mesmo eixo temporal, controle único no topo.
filter chips
empty state em chart
Quando não há dados pra mostrar (filtro vazio, primeira vez, erro), substitua o chart por um estado vazio com call-to-action.
sem dados pra esse período
tenta um intervalo maior ou ajusta os filtros.
alternativas via teclado
- Hover → equivalente: focus via Tab no ponto/barra
- Drill-down → Enter no elemento focado
- Brush → input de data range (input type='date')
- Legend toggle → checkbox associado
- Time range → button group nativo