Design System · Gráficos

Referência Completa de Gráficos

Todos os gráficos disponíveis no Looker Studio — definições, quando usar, quando não usar, variações e dicas de configuração com as cores UniFECAF.

Looker Studio 15 tipos de gráficos 6 categorias Documentação oficial Google
📊
Comparação
Use para comparar valores entre categorias, grupos ou períodos distintos
01
Gráfico de Colunas
Looker Studio: "Gráfico de colunas"
📊 Comparação

Exibe valores numéricos em barras verticais, uma por categoria. Ideal para comparar quantidades entre grupos distintos em um mesmo período.

✓ Quando usar
Comparar valores entre categorias independentes
Até 8 categorias — acima disso use barras horizontais
Rótulos de categoria curtos
✗ Quando NÃO usar
Evolução temporal → use Série Temporal
Partes de um todo → use Pizza ou Rosca
Variações
Simples Empilhadas 100% empilhadas
Exemplo — Receita por Categoria
420
Cat. A
310
Cat. B
275
Cat. C
190
Cat. D
95
Cat. E
💡 Looker: Cor principal: #1A3666. Ative "Mostrar rótulos" com Montserrat Bold. Gráficos modernos (2025): bordas arredondadas disponíveis.
📐 Eixos: Nomeie o eixo Y com a métrica e unidade — ex: "Quantidade (un)" ou "Receita (R$)". O eixo X geralmente representa as categorias — ex: "Categoria", "Departamento". Eixo Y deve começar em zero.
📄 Documentação oficial Google ↗
Gráfico de Barras (Horizontal)
Looker Studio: "Gráfico de barras"
📊 Comparação

Igual ao de colunas, mas com barras horizontais. Melhor quando as categorias têm nomes longos ou quando há muitos itens para comparar.

✓ Quando usar
Rankings e listas ordenadas por valor
Nomes de categorias longos
Mais de 8 itens para comparar
✗ Quando NÃO usar
Dados com ordem temporal
Poucas categorias (2–3) → colunas ficam melhor
Variações
Simples Empilhadas 100% empilhadas
Exemplo — Ranking por Valor
Item A
840
Item B
605
Item C
437
Item D
294
💡 Looker: Ative "Ordenar por valor" para criar rankings automáticos. Use cor única #1A3666 quando todos representam a mesma métrica.
📐 Eixos: O eixo Y (horizontal neste caso) representa a métrica — ex: "Valor total". O eixo X (vertical) lista os itens rankeados. Inclua a unidade de medida no título do eixo.
📄 Documentação oficial Google ↗
Gráfico Combinado (Coluna + Linha)
Looker Studio: "Gráfico de combinação"
📊 Comparação

Combina colunas e linhas no mesmo gráfico. Permite comparar duas métricas de escalas diferentes — como volume (colunas) e percentual (linha).

✓ Quando usar
Volume (colunas) + % de variação (linha)
Duas métricas de escalas diferentes no mesmo gráfico
Meta (linha) + realizado (colunas)
✗ Quando NÃO usar
Mesma escala nas duas métricas → use só colunas
Mais de 2 métricas → fica confuso
Variações
Combo simples Combo empilhado Linha suavizada
Exemplo — Volume + % Crescimento
180
Jan
240
Fev
160
Mar
310
Abr
280
Mai
Volume
% Crescimento
💡 Looker: Colunas em #1A3666, linha em #FF2B5F. Ative eixo secundário (direita) quando as escalas forem diferentes.
📐 Eixos: Use eixo Y esquerdo para as colunas e eixo Y direito (secundário) para a linha quando as escalas forem diferentes. Nomeie cada eixo com a métrica correspondente — ex: "Volume (un)" e "% Crescimento".
📄 Documentação oficial Google ↗
Gráfico de Dispersão
Looker Studio: "Gráfico de dispersão"
📊 Comparação

Exibe a relação entre duas métricas como pontos em um plano cartesiano. Cada ponto representa uma dimensão posicionada pelos dois valores — útil para encontrar correlações e outliers.

✓ Quando usar
Identificar correlação entre duas métricas
Encontrar outliers em grupos de dados
Comparar desempenho de itens em dois eixos
✗ Quando NÃO usar
Audiências não analíticas — difícil de interpretar
Dados categóricos sem relação entre si
⚠ Recomendado apenas para dashboards técnicos ou analíticos. Não adequado para painéis operacionais simples.
💡 Looker: Cor dos pontos: #1A3666. Ative linha de tendência para visualizar correlação. Use tamanho da bolha para adicionar uma 3ª métrica.
📄 Documentação oficial Google ↗
📈
Tendência / Tempo
Use para mostrar como os dados evoluem ao longo do tempo
02
Série Temporal
Looker Studio: "Série temporal"
📈 Tendência

Mostra a evolução de métricas ao longo do tempo com linha contínua. O gráfico ideal para análises temporais — diárias, semanais ou mensais.

✓ Quando usar
Evolução de uma métrica ao longo de meses
Comparar dois períodos (ex: ano atual vs anterior)
Identificar sazonalidade e tendências
✗ Quando NÃO usar
Dados sem ordem temporal
Poucos pontos no tempo (2–3) → use colunas
Variações
Padrão Linha suavizada Minigráfico
Exemplo — Evolução Mensal
Jan Fev Mar Abr Mai Jun
Período atual
Período anterior
💡 Looker: Série atual: #1A3666. Período anterior: #c2c2c2 tracejado. Ative sombreamento sob a linha para destacar a área.
📐 Eixos: O eixo X é sempre o tempo — o Looker preenche automaticamente. Nomeie o eixo Y com a métrica e unidade — ex: "Quantidade de registros" ou "Receita (R$)". Inclua o período no título do gráfico, não nos eixos.
📄 Documentação oficial Google ↗
Gráfico de Linha do Tempo (Timeline)
Looker Studio: "Gráfico de linha do tempo"
📈 Tendência

Visualiza eventos e suas durações ao longo de um eixo de tempo, como um diagrama de Gantt. Permite comparar quando eventos aconteceram e por quanto tempo duraram.

✓ Quando usar
Duração e sobreposição de eventos ou etapas
Comparar tempo entre grupos diferentes
Visualizar fases de um processo no tempo
✗ Quando NÃO usar
Dados sem data de início e fim definidos
Comparação de volumes → use série temporal
ℹ Requer campos de data de início e data de fim na fonte de dados.
💡 Looker: Configure cores por categoria usando a paleta brand. Cada faixa representa um grupo ou etapa diferente.
📄 Documentação oficial Google ↗
🥧
Proporção
Use para mostrar como cada parte contribui para o total
03
Pizza e Rosca
Looker Studio: "Gráfico de pizza" / "Gráfico de rosca"
🥧 Proporção

Exibe cada categoria como uma fatia proporcional ao total. A rosca tem o centro vazio — permite colocar o total em destaque no meio.

✓ Quando usar
Distribuição percentual entre categorias
Até 5 categorias — acima disso use barras
Quando o "todo" é tão importante quanto as partes
✗ Quando NÃO usar
Mais de 5 categorias → use barras ou treemap
Comparar valores absolutos → pizza só mostra proporção
Dados temporais
Variações
Pizza Rosca ⭐ preferida
Exemplo — Distribuição por Categoria
100%
Grupo A
40%
Grupo B
25%
Grupo C
20%
Grupo D
15%
💡 Looker: Prefira a Rosca — sobreponha um scorecard no centro com o total. Cores: #1A3666 → #254AB9 → #00B1D2 → #17A460.
📄 Documentação oficial Google ↗
Mapa de Árvore (Treemap)
Looker Studio: "Mapa de árvore"
🥧 Proporção

Organiza dados em retângulos aninhados proporcionais ao valor. Excelente para visualizar muitas categorias com hierarquia de uma vez.

✓ Quando usar
Muitas categorias (10+) onde pizza seria ilegível
Dados com hierarquia: Nível 1 → Nível 2
Identificar visualmente quais categorias dominam
✗ Quando NÃO usar
Valores muito similares — retângulos do mesmo tamanho
Dados temporais ou sequenciais
💡 Looker: Use gradiente para representar intensidade: #002156 (alto) → #95DE68 (baixo). Adicione rótulos com % para facilitar leitura.
📄 Documentação oficial Google ↗
Gráfico de Funil
Looker Studio: "Gráfico de funil"
🥧 Proporção

Visualiza como uma métrica diminui ao longo de etapas sequenciais de um processo. Mostra onde ocorrem as maiores perdas ou gargalos.

✓ Quando usar
Processos sequenciais com redução de volume por etapa
Identificar onde ocorrem as maiores perdas
Fluxos de conversão com etapas definidas
✗ Quando NÃO usar
Processos não sequenciais
Dados sem relação de fluxo entre etapas
Exemplo — Etapas de um Processo
Etapa 1 — 1.200
Etapa 2 — 960
Etapa 3 — 695
Etapa 4 — 430
💡 Looker: Cores das etapas na sequência brand. A largura proporcional ao volume indica onde estão os maiores gargalos.
📄 Documentação oficial Google ↗
📋
Dados Detalhados
Use para mostrar o dado bruto, linhas individuais ou um único número em destaque
04
42
Scorecard (Quadro de Visão Geral)
Looker Studio: "Quadro de visão geral"
📋 Dados

Exibe um único número em destaque — a métrica mais importante daquele contexto. É a base dos KPI Cards. Pode exibir variação em relação ao período anterior automaticamente.

✓ Quando usar
Destacar o KPI mais importante da página
Exibir totais, médias ou percentuais-chave
Com delta automático do período anterior
✗ Quando NÃO usar
Quando o contexto exige mais de 1 número → use tabela
Variações
Padrão Número compacto (K, M) Com variação % Com sparkline
💡 Looker: Fundo #1A3666 (destaque) ou branco (secundário). Valor em Montserrat ExtraBold 800. Delta positivo: #95DE68, negativo: #FF2B5F.
📄 Documentação oficial Google ↗
Tabela
Looker Studio: "Tabela"
📋 Dados

Mostra dados linha a linha com ordenação e paginação. O componente mais completo para exibir registros individuais com múltiplos atributos.

✓ Quando usar
Listar registros com múltiplos atributos
Usuário precisa filtrar, ordenar e buscar
Com formatação condicional por valor
✗ Quando NÃO usar
Objetivo é mostrar tendências → use série temporal
Dashboard executivo → preferem gráficos e KPIs
Variações
Padrão Com barras Com mapa de calor
💡 Looker: Header: #1A3666 branco Bold. Linhas alternadas: #f7f7f5. Use formatação condicional para destacar valores críticos.
📄 Documentação oficial Google ↗
Tabela Dinâmica (Pivot)
Looker Studio: "Tabela dinâmica"
📋 Dados

Reorganiza e resume dados com dimensões em linhas e colunas ao mesmo tempo — como uma planilha cruzada. Permite ver uma métrica na intersecção de duas dimensões.

✓ Quando usar
Cruzar duas dimensões para ver uma métrica
Ex: Categoria (linha) × Período (coluna)
Análises comparativas densas
✗ Quando NÃO usar
Audiências não analíticas → muito densa visualmente
Quando uma tabela simples já resolve
💡 Looker: Adicione mapa de calor nas células para identificar padrões. Header de linha e coluna em #1A3666.
📄 Documentação oficial Google ↗
🔬
Avançados
Requerem preparação específica de dados — use apenas para audiências analíticas
05
Atenção: Os gráficos desta categoria exigem que os dados já estejam no formato correto na fonte. É necessário preparar as colunas específicas antes de configurar no Looker Studio.
Diagrama de Sankey
Looker Studio: "Sankey"
🔬 Avançado

Exibe fluxos entre dois conjuntos de valores. A largura dos conectores é proporcional ao volume que flui entre os nós. Ideal para mapeamentos muitos-para-muitos ou caminhos por etapas.

✓ Quando usar
Fluxo entre origem → destino com múltiplos caminhos
Relações hierárquicas sequenciais entre dimensões
Visualizar como volumes se distribuem entre categorias
✗ Quando NÃO usar
Dados sem relação de fluxo entre dimensões
Muitos nós (10+) → fica ilegível
ℹ Melhor para mapeamentos muitos-para-muitos. Funciona com múltiplas dimensões relacionadas hierarquicamente.
💡 Looker: Mantenha até 5–6 nós por lado. Cores dos fluxos na sequência brand. Evite cruzamentos excessivos.
📄 Documentação oficial Google ↗
Gráfico Cascata (Waterfall)
Looker Studio: "Cascata"
🔬 Avançado

Visualiza como uma sequência de valores positivos e negativos se acumula para chegar a um total. Exibe as variações como colunas flutuantes.

✓ Quando usar
Variação acumulada de uma métrica no tempo
Impacto de entradas e saídas num resultado final
Decomposição de um total em contribuições parciais
✗ Quando NÃO usar
Dados sem sequência lógica de contribuição
Fonte com totais absolutos — precisa de deltas
⚠ A fonte de dados precisa conter as variações (deltas), não os totais. Preparação prévia necessária.
💡 Looker: Positivo: #17A460, negativo: #d32f2f, total: #1A3666.
📄 Documentação oficial Google ↗
Box Plot (Diagrama de Caixa)
Looker Studio: "Boxplot"
🔬 Avançado

Visualiza distribuição e dispersão de valores — exibe mínimo, Q1, mediana, Q3 e máximo. Útil para comparar variabilidade entre grupos e identificar outliers.

✓ Quando usar
Comparar distribuição de uma métrica entre grupos
Identificar outliers em conjuntos de dados
Análise estatística de variabilidade
✗ Quando NÃO usar
Audiências não técnicas — difícil de interpretar
Menos de 10 valores por categoria
⚠ Recomendado apenas para dashboards técnicos ou de gestão analítica.
💡 Looker: Caixas em #1A3666, outliers em #FF2B5F. Inclua legenda explicando os quartis.
📄 Documentação oficial Google ↗
Candlestick (Vela)
Looker Studio: "Candlestick"
🔬 Avançado

Visualiza intervalos de dados com quatro valores por período: abertura, fechamento, máximo e mínimo. Comum para dados financeiros ou qualquer dado com estrutura de intervalo.

✓ Quando usar
Dados com 4 valores por período (abertura, fechamento, máx, mín)
Análises de intervalos e variações em séries
✗ Quando NÃO usar
Dados sem os 4 campos obrigatórios
Dashboards operacionais — muito específico
⚠ Uso muito restrito. Requer 4 métricas específicas na fonte de dados.
💡 Looker: Vela positiva (fechamento > abertura): #17A460. Vela negativa: #d32f2f.
📄 Documentação oficial Google ↗
🗺️
Especializados
Casos de uso específicos — mapas geográficos e indicadores de meta
06
Mapa Geográfico
Looker Studio: "Área geográfica" / "Google Maps"
🗺️ Especial

Exibe dados em mapa por país, estado ou região. Valores representados por intensidade de cor.

Dados com dimensão geográfica (estado, cidade, país)
Distribuição espacial de uma métrica
Dados sem dimensão geográfica
💡 Looker: Gradiente: claro (#c7d4f5) → escuro (#002156) para intensidade.
📄 Documentação ↗
Gráfico de Marcador (Bullet)
Looker Studio: "Gráfico de marcador"
🗺️ Especial

Mostra o desempenho de uma métrica em relação a uma meta, com barra de realizado e marcador de referência. Compacto e direto.

Realizado vs Meta com linha de referência
% de atingimento em relação ao alvo
Múltiplas métricas sem relação de meta
💡 Looker: Barra: #1A3666. Faixa aceitável: #c7d4f5. Meta: #d32f2f.
📄 Documentação ↗
Gauge (Velocímetro)
Looker Studio: "Medidor"
🗺️ Especial

Exibe um único valor em formato de velocímetro, dentro de uma faixa predefinida. Indica visualmente o progresso em relação a um alvo ou limite.

% de atingimento de meta (0–100%)
Indicadores com limite máximo definido
Comparações entre categorias → use barras
💡 Looker: Verde: 80–100%, amarelo: 60–80%, vermelho: 0–60%. Use com moderação — ocupa espaço para pouca informação.
📄 Documentação ↗

Resumo — Qual gráfico usar?

Guia rápido de decisão
SITUAÇÃO GRÁFICO CATEGORIA
Comparar valores entre categorias independentes Colunas Comparação
Ranking de itens por valor com nomes longos Barras (horizontal) Comparação
Duas métricas de escalas diferentes no mesmo gráfico Combinado Comparação
Correlação e outliers entre duas métricas Dispersão Comparação
Evolução de uma métrica ao longo do tempo Série Temporal Tendência
Duração e sobreposição de eventos ou etapas Timeline Tendência
Distribuição percentual entre até 5 categorias Rosca Proporção
Muitas categorias com hierarquia Treemap Proporção
Processo sequencial com redução por etapa Funil Proporção
Destacar um único KPI em destaque Scorecard Dados
Listar registros com múltiplos atributos Tabela Dados
Realizado vs Meta em barra compacta Bullet Especial
Boas Práticas de Visualização
Regras gerais que se aplicam a todos os gráficos no Looker Studio
📐 Eixos X e Y
Sempre nomeie os eixos. O usuário precisa saber o que está sendo medido sem precisar adivinhar. Ex: eixo Y = "Quantidade", eixo X = "Mês".
Inclua a unidade de medida no nome do eixo quando necessário. Ex: "Valor (R$)", "Tempo (dias)", "Volume (un)".
O eixo Y deve começar em zero para gráficos de colunas e barras — truncar o eixo distorce a percepção visual do tamanho das diferenças.
Não use eixo Y com escala logarítmica em dashboards operacionais — confunde usuários não técnicos.
💡 No Looker: Painel de propriedades → aba "Estilo" → seção "Eixo" → campo "Título do eixo".
🏷️ Títulos e Subtítulos
Todo gráfico precisa de um título. O título deve responder "o que este gráfico mostra?". Ex: "Receita por Categoria — Janeiro 2026".
Use o subtítulo para contextualizar o período, o filtro aplicado ou a fonte dos dados. Ex: "Dados de jan–jun 2026 · Fonte: ERP".
Título objetivo, não descritivo. Prefira "Receita Mensal" a "Gráfico mostrando a receita por mês".
Não deixe o título padrão do Looker ("Gráfico de colunas 1") — sempre personalize.
💡 No Looker: Duplo clique no gráfico → "Título do gráfico" no painel de propriedades. Fonte: Montserrat SemiBold 600.
🔢 Rótulos de Dados (Data Labels)
Ative rótulos de dados quando o valor exato importa — em KPI cards, scorecards e gráficos de colunas com poucas categorias.
Use número compacto (K, M) para valores grandes. Ex: "1.2M" em vez de "1.200.000" — menos poluição visual.
Posicione rótulos fora da barra quando o valor precisa ser lido com clareza — dentro só quando há espaço suficiente.
Não ative rótulos em gráficos com muitas séries ou categorias — vira ruído visual e fica ilegível.
💡 No Looker: Painel de propriedades → aba "Estilo" → "Rótulos de dados" → ativar e definir posição e formato.
📌 Legendas
Use legenda quando há mais de uma série. Posicione-a abaixo ou ao lado do gráfico — nunca sobreposta aos dados.
Nomeie as séries de forma clara. "Período Atual" e "Período Anterior" em vez de "Série 1" e "Série 2".
Não exiba legenda quando há só uma série — é redundante e ocupa espaço desnecessário.
Evite legendas com mais de 6 itens — se precisar, revise se o gráfico está adequado para os dados.
💡 No Looker: Painel de propriedades → aba "Estilo" → "Legenda" → posição e visibilidade.
📝 Texto de Apoio e Anotações
Adicione texto de apoio para explicar o que o valor representa quando não é óbvio. Ex: embaixo de um scorecard com "89,8%", adicione "% de atingimento da meta do mês".
Use alertas inline para informações críticas que o usuário precisa ver imediatamente. Ex: "⚠ Atenção: no ritmo atual a meta não será atingida".
Indique a data da última atualização dos dados — o usuário precisa saber se os dados são de hoje ou de dias atrás.
Não sobrecarregue com texto — se precisar de muita explicação, o dado provavelmente precisa de um gráfico diferente.
💡 No Looker: Use "Caixa de texto" do menu Inserir para anotações. Fonte Montserrat 400, tamanho 11–12pt, cor #5c5c5c.
💬 Tooltips (Dicas ao Passar o Mouse)
O tooltip é o complemento ideal para mostrar informações extras sem poluir o gráfico. Use para exibir o valor exato, porcentagem e dimensão ao mesmo tempo.
Configure campos adicionais no tooltip. No Looker, você pode adicionar métricas extras que só aparecem ao passar o mouse — sem ocupar espaço no gráfico.
Use o tooltip para contexto comparativo. Ex: ao passar o mouse em uma barra de Março, mostrar também o valor de Março do ano anterior.
Não dependa só do tooltip para informações críticas — usuários em mobile ou em apresentações não conseguem interagir com hover.
💡 No Looker: Painel de propriedades → aba "Dados" → seção "Informações de dica" → adicionar campos extras que aparecem só no tooltip.
Acessibilidade — Contraste e Tamanho Mínimo
Tamanho mínimo de fonte: 11pt para qualquer texto em dashboard — abaixo disso compromete a leitura, especialmente em telas menores ou projetores.
Contraste mínimo WCAG AA: texto sobre fundo colorido deve ter proporção mínima de 4.5:1. Exemplo correto: texto branco (#fff) sobre fundo navy (#1A3666).
Não dependa só de cor para transmitir informação — adicione ícones ou texto auxiliar. Ex: além do vermelho, use "⚠" ou o texto "Abaixo da meta".
Tamanho mínimo de elemento clicável: 44×44px — importante em dashboards acessados por tablet ou touch.
Não use paleta de cores que dependa de distinção entre vermelho e verde sem apoio visual — usuários com daltonismo não conseguem diferenciar.
Evite texto em itálico em tamanhos pequenos — prejudica a leitura em telas de baixa resolução.
Combinações de contraste aprovadas — use sem hesitar
Texto brancosobre #1A3666 ✓
Texto brancosobre #002156 ✓
Texto escurosobre #f7f7f5 ✓
Texto verde escurosobre #e8f8ef ✓
Texto vermelho escurosobre #fdecea ✓
Texto navysobre #95DE68 ✓
Combinações a evitar: texto amarelo (#F2CB0A) sobre fundo branco — contraste insuficiente. Texto cinza claro (#c2c2c2) sobre fundo branco — ilegível em telas com brilho reduzido.
✅ Checklist Rápido — Antes de publicar qualquer gráfico
📐 O gráfico tem título?
📐 Os eixos X e Y estão nomeados?
🎨 As cores seguem a paleta UniFECAF?
🎨 Cores semânticas respeitadas (verde=positivo)?
🔢 O rótulo de dados está ativo (se necessário)?
🔢 Números grandes usam formato compacto (K, M)?
📌 A legenda é necessária? Está posicionada corretamente?
📝 Há texto de apoio onde o valor não é óbvio?
💬 O tooltip tem campos relevantes configurados?
Fonte mínima 11pt? Contraste adequado?
📅 A data de atualização está visível?
🖥️ O gráfico é legível em tela cheia e em zoom 100%?