Todo artigo com dado comparativo esbarra na mesma decisão: como mostrar isso visualmente. A resposta automática costuma ser instalar uma biblioteca de gráficos. Só que, para meia dúzia de barras, essa escolha custa caro — e o mais irônico é que o resultado costuma ser menos acessível do que a alternativa de três linhas de CSS.
Este artigo mostra o padrão de gráfico que usamos nos posts deste blog: barras horizontais em HTML e CSS puro, sem nenhuma dependência. Todo o código abaixo está em produção aqui mesmo.
O problema: 500 KB para desenhar quatro barras
Bibliotecas de gráfico resolvem problemas reais — eixos calculados, escalas, interação, séries temporais. O detalhe é que você paga pelo pacote inteiro mesmo usando um por cento dele.
Para saber o tamanho real, baixamos os arquivos minificados direto do CDN e medimos os bytes, sem gzip:
Peso do JavaScript para renderizar um gráfico de barras simples
Medição da Due Web Studio em 12/08/2026: arquivos minificados baixados do jsDelivr, tamanho em bytes sem compressão gzip. A linha "HTML e CSS puro" é o bloco de CSS descrito neste artigo. A barra dela aparece em 1% por questão de visibilidade — proporcionalmente seria 0,25%.
São ordens de grandeza diferentes. E o custo não para no download: JavaScript precisa ser baixado, interpretado e executado antes de desenhar qualquer pixel, enquanto CSS entra no primeiro paint. Em uma página de conteúdo, onde o gráfico costuma estar bem no meio do texto, isso mexe direto com o Largest Contentful Paint.
O markup: o valor no texto, não na barra
A decisão mais importante do padrão não é visual — é onde a informação mora. Cada linha do gráfico é uma grade de três partes: rótulo, trilho e valor.
Regra que define tudo: a largura da barra é reforço da informação, nunca a informação em si. O valor aparece como texto real em toda linha.
Isso resolve acessibilidade sem nenhum atributo ARIA. Um leitor de tela lê "Chart.js, 204 KB" porque os dois são texto. Se o CSS não carregar, o conteúdo continua legível como uma lista. E dá para copiar os números com o mouse, o que um gráfico em canvas não permite.
A estrutura de uma linha é essa:
- Um contêiner com a classe do gráfico, envolvendo tudo.
- Um título curto em parágrafo com strong, dizendo o que está sendo medido e em que unidade.
- Uma linha por barra, com rótulo, trilho e valor.
- Dentro do trilho, a barra com a largura em porcentagem inline.
- Um parágrafo de fonte no fim, citando de onde vem o dado.
A porcentagem é calculada na hora de escrever: o maior valor da série vira 100% e os outros ficam proporcionais a ele. Nenhuma conta acontece no navegador do visitante.
O CSS: grade de três colunas e um trilho que corta
O layout de cada linha é uma grade simples. A primeira coluna usa minmax() para o rótulo — um piso em pixels para não espremer, e um teto em porcentagem para não dominar a linha. A do meio ocupa o espaço restante. A terceira encolhe até o tamanho do valor.
Por que o trilho precisa de overflow hidden
O trilho tem cantos arredondados e a barra vive dentro dele. Sem overflow: hidden no trilho, a barra em 100% estoura os cantos e o arredondamento some justamente na barra mais importante. Com ele, o trilho recorta a barra e a curva se mantém.
Detalhe pequeno que muda o acabamento: a barra arredonda só os cantos da direita. À esquerda ela encosta na origem, e canto arredondado ali faria parecer que a barra começa depois do zero.
O detalhe que quase todo mundo esquece: tabular-nums
Valores numéricos em coluna precisam alinhar. Em fontes proporcionais o "1" é mais estreito que o "8", então "527 KB" e "204 KB" ficam com larguras diferentes e a coluna dança. A correção é uma linha: font-variant-numeric: tabular-nums, que faz cada dígito ocupar a mesma largura. É a diferença entre um gráfico que parece feito e um que parece montado às pressas.
Responsivo sem duplicar o gráfico
Em tela estreita, três colunas não cabem: o rótulo espreme e a barra vira um traço. A solução não é esconder nada nem servir um segundo markup — é reorganizar a mesma grade.
Numa media query abaixo de 480px, a grade passa a ter duas colunas e o rótulo ocupa a linha inteira acima delas. O resultado: rótulo em cima, barra e valor lado a lado embaixo. Mesmo HTML, mesma informação, nenhuma regra condicional no conteúdo — quatro linhas de CSS.
Essa é a vantagem estrutural de fazer com CSS Grid em vez de canvas: o gráfico reflui como conteúdo, porque ele é conteúdo.
Contraste do trilho: o erro silencioso
O trilho de fundo costuma ser desenhado com um cinza bem claro, quase invisível. Isso é um problema de acessibilidade real: as diretrizes de contraste de elementos não textuais pedem contraste mínimo para componentes que carregam informação.
Como aqui o valor está no texto, o trilho não é a única fonte da informação — o que reduz o risco. Ainda assim, um trilho invisível tira a referência de escala e a comparação entre barras fica pior. Vale checar o contraste entre trilho e fundo, e entre barra e trilho.
Quando a biblioteca vale mesmo a pena
Seria desonesto terminar sem isso. O padrão descrito aqui é bom para um caso específico: poucas barras, comparação direta, dado estático dentro de um texto. Fora disso, ele quebra rápido.
- Eixos e escalas calculados: se o eixo precisa se ajustar sozinho aos dados, você vai reimplementar a biblioteca, pior.
- Interação de verdade: tooltip, zoom, filtrar série clicando na legenda — nada disso sai de CSS.
- Muitos pontos: centenas de linhas de HTML pesam mais que a biblioteca que você evitou.
- Geometria: pizza, radar, dispersão e linha dependem de cálculo. Barra horizontal é o caso raro em que a geometria é só uma largura.
- Dado que muda: se vem de API e atualiza sozinho, você já tem JavaScript na página de qualquer jeito.
O critério prático: se o gráfico for estático, pequeno e comparativo, CSS ganha com folga. Se ele for interativo ou dinâmico, use a biblioteca e não sinta culpa.
O que levar deste artigo
- Coloque o valor no texto. Isso resolve acessibilidade, cópia e o cenário sem CSS de uma vez só.
- Calcule a proporção ao escrever, não no navegador do visitante.
- Use grid de três colunas e reorganize para duas no mobile — mesmo markup.
- Não esqueça overflow: hidden no trilho e tabular-nums no valor.
- Use variáveis CSS nas cores para o gráfico acompanhar o tema.
- Saiba a hora de parar e instalar a biblioteca.
Conclusão
A escolha entre CSS puro e biblioteca de gráficos não é sobre purismo — é sobre proporção entre a ferramenta e o problema. Meia dúzia de barras num artigo não justifica meio megabyte de JavaScript, e a versão em CSS acaba mais acessível de brinde, porque o dado nasce como texto.
Esse cuidado com peso e acessibilidade é o mesmo que aplicamos em sites institucionais e landing pages, e que sustenta o trabalho de SEO e de manutenção depois da entrega. Se quiser discutir o seu projeto, fale com a gente.
FAQ
