Bloco Gráfico de barras
Barras verticais ou horizontais para comparar valores entre categorias — o gráfico workhorse para "qual desses é maior," com até 3 séries.
Como funciona
O gráfico é renderizado como um único PNG gerado no servidor (sem biblioteca de gráficos no lado do cliente, sem JavaScript) com uma tabela de dados HTML sempre visível logo abaixo, repetindo todo número que a imagem desenha. A tabela não é um fallback parafusado para clientes quebrados — são os mesmos números da imagem, em HTML simples, e é o que torna o gráfico utilizável em clientes somente texto, caixas de entrada que bloqueiam imagens e leitores de tela.
Os dados são autorados como linhas: uma coluna Category mais até três colunas numéricas de série. A Série 1 está sempre ativa — um gráfico de barras de série única não precisa de um nome de série próprio, já que o próprio título do bloco já a identifica.
As Séries 2 e 3 só se ativam quando você dá a elas um nome em Series 2 name / Series 3 name. Uma coluna de valores parcialmente preenchida sem nome de série é ignorada em vez de aparecer como uma barra fantasma sem rótulo, então dados parcialmente preenchidos nunca vazam para a renderização. Cada série ativa recebe sua própria cor, escolhida pelo autor por série ou resolvida a partir da paleta categórica do projeto. Uma legenda (amostra colorida + rótulo) só aparece a partir de 2 ou mais séries ativas — uma série solitária já é nomeada pelo próprio título do gráfico, então uma legenda de um item só seria redundante.
Até cerca de 8 categorias, cada barra recebe um rótulo de valor direto desenhado sobre ou acima dela na própria imagem, além da tabela de dados. Passando desse limite, o gráfico abandona os rótulos por barra em favor de um eixo de valor compartilhado com linhas de grade. Tentar encaixar um rótulo de valor em cada uma de mais de uma dúzia de barras deixa de ser legível bem antes desse ponto. Assim, o eixo assume a leitura rápida, e a tabela de dados se torna a fonte precisa para números exatos. O gráfico é limitado a 24 categorias no total; qualquer coisa autorada além disso simplesmente não é desenhada (a tabela de dados só reflete o que foi de fato plotado).
Barras horizontais invertem o eixo de categoria para correr de cima para baixo em vez de esquerda para direita. Escolha isso quando os nomes de categoria forem longos ou numerosos — rótulos horizontais não precisam ser rotacionados ou truncados como os rótulos de eixo vertical precisam.
Campos configuráveis:
- Chart title — mostrado acima da imagem; também o nome de série de fallback quando apenas a Série 1 está ativa.
- Alternador Horizontal bars.
- Data — a lista de linhas (Category + Série 1/2/3).
- Series 1/2/3 name e Series 1/2/3 color.
- Background color, padding, border, border radius no cartão.
- Pares independentes de cor/tamanho de fonte para o título e o texto da legenda/tabela.
Um gráfico de barras também pode vincular suas linhas a uma fonte de dados conectada em vez de autorá-las diretamente. Um campo Group by transforma cada valor distinto em uma categoria, emparelhado com até 3 campos de série — cada um com seu próprio agregado (Soma, Média, Contagem ou Última linha) — espelhando o mesmo formato de até 3 séries das linhas autoradas. Um filtro opcional pode referenciar merge tags do destinatário, para que o mesmo bloco mostre a cada destinatário sua própria fatia de uma fonte compartilhada. Veja Vinculando gráficos a dados reais para a mecânica completa, incluindo o modo de resultados de resposta de campanha.
Exemplos
Subject
Q3 revenue vs. cost breakdown
O propósito de projeto Dashboard semeia um gráfico de barras automaticamente, logo abaixo de uma fileira de três scorecards de KPI — um ponto de partida de um clique para um relatório recorrente; veja o preset de grade do Dashboard. Um resumo semanal de vendas pode mostrar a receita por região como três ou quatro categorias com uma única série, ou "esta semana vs. semana passada" como duas séries por categoria para uma comparação direta. Um relatório pós-evento pode usar barras horizontais para "RSVPs por esquadrão" quando há uma dúzia de nomes de equipe longos demais para caber como rótulos de eixo vertical. Um resumo de progresso do vertical de educação poderia mostrar a pontuação média de quiz por turma, uma barra por turma, vinculado ao vivo a uma fonte de dados para que os números fiquem atuais toda vez que o envio recorrente sair.
Como é o fallback estático
<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
<p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<table style="width:100%;border-collapse:collapse;margin-top:4px">
<tr>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
O <img> carrega um alt text descritivo resumindo cada valor de categoria/série, e a tabela abaixo dele repete os mesmos números como HTML simples, sempre visível.