SVG Sparkline

Sparklines: gráficos do tamanho de uma palavra para dashboards densos

O termo sparkline foi cunhado por Edward Tufte em Beautiful Evidence (2006), onde ele os definiu como "gráficos com muitos dados, design simples, do tamanho de uma palavra". A ideia é embutir um mini gráfico junto ao texto — tipicamente 16 a 50 pixels de altura — para que o leitor capte a tendência sem quebrar o ritmo da leitura. Bloomberg Terminal, Yahoo Finance, o calendário de contribuições do GitHub (uma variante) e a maioria dos dashboards SaaS modernos usam sparklines para resumir histórico de KPIs em uma olhada.

A implementação em SVG é direta: uma única <polyline> recebe uma lista de pontos x,y escalonados dentro do viewBox. Os dados são normalizados mapeando o mínimo e o máximo do array para o intervalo de pixels disponível. Um sparkline pronto fica abaixo de 500 bytes, o que permite centenas deles na mesma página sem perda de performance.

<svg viewBox="0 0 100 30" width="100" height="30">
  <polyline points="0,15 10,5 20,25 30,10 40,18 50,7 60,12"
            fill="none" stroke="#10b981" stroke-width="2"/>
</svg>

Variantes e anotações

Além da linha padrão, o formato cobre bar (mini histograma), area (preenchido abaixo da linha) e win/loss (ticks vermelhos e verdes para resultados binários). Anotações úteis incluem um círculo maior no último ponto (valor atual), um ponto vermelho no mínimo e um ponto verde no máximo. São as mesmas convenções que Tufte apresentou e que o Excel adotou nativamente em 2010.

Bibliotecas e ecossistema

Implementações populares incluem peity.js (Ben Pickles, jQuery), react-sparklines (Borja Tarraso), o pacote npm sparkline e o plugin de sparkline do Chart.js. O Datawrapper gera sparklines automaticamente a partir de dados tabulares e o Observable HQ os trata como cells de primeira classe. Para um SVG estático, montar à mão — como faz este gerador — mantém o bundle enxuto e evita dependências em runtime.

Sparkline vs gráfico completo

Um sparkline tem 16 a 50 px; um gráfico completo, 300 a 500 px. Use sparkline quando o objetivo for resumir contexto (direção da tendência, volatilidade recente) ao lado da métrica principal — por exemplo, um card de KPI mostrando "R$ 12.400 ▁▂▅▇" — e reserve gráficos completos para telas de drill-down. A linha de tickers da Bloomberg combina os dois: um número, a variação percentual e um sparkline do intradiário.

Perguntas frequentes

Verde sempre significa "subindo" e vermelho "caindo"? É a convenção financeira, mas falha para os cerca de 8% dos homens com daltonismo vermelho-verde. Combine cor com forma (seta, ponto) ou use uma paleta segura para daltônicos, como laranja e azul.

Quantos pontos funcionam melhor? Entre 10 e 30. Menos de 10 fica ruidoso; mais de 30 transforma a linha em um borrão no tamanho de sparkline. Agregue (média diária, bucket horário) antes de plotar se a série original for mais densa.

Dá para adicionar tooltip no hover? Sim. Envolva cada ponto em um <circle> com um <title> filho para tooltips nativos do navegador, ou anexe listeners JS para um popover mais rico. Mantenha opcional — sparklines devem ser legíveis sem interação.

O SVG é acessível? Adicione um aria-label resumindo a tendência, por exemplo aria-label="Vendas dos últimos 7 dias, em alta 14%", para que leitores de tela transmitam a leitura mesmo sem ver a linha.