Repolode
Enviar
timqian

timqian/chart.xkcd

Biblioteca JavaScript que renderiza gráficos de linhas, barras e outros em SVG, com um estilo esboçado à mão inspirado no xkcd.

Ver no GitHubSite
Estrelas
7,872
Forks
207
Issues abertas
3
Último commit
há 17 dias

O que é?

chart.xkcd é uma biblioteca JavaScript que desenha gráficos em um estilo cartunesco e “esboçado”, feito à mão e inspirado na tira xkcd. Os gráficos são renderizados em um único elemento SVG na página; basta incluir o script e apontá-lo para um nó <svg> para criar um gráfico.

Para criar um gráfico, instancie um construtor como chartXkcd.Line com o SVG de destino e passe um título, os rótulos dos eixos e um objeto de dados com rótulos e conjuntos de dados. A biblioteca pode ser carregada por CDN ou npm, e o projeto oferece um site de documentação com exemplos.

É indicada para apresentações informais, posts de blog ou diagramas em que não se busca um visual corporativo e sofisticado.

Recursos principais

  • 01Renderiza gráficos de linhas e outros tipos com um visual esboçado, feito à mão.
  • 02Desenha tudo em um único elemento SVG na página.
  • 03É configurada por meio de um objeto de dados simples com rótulos e conjuntos de dados.
  • 04Disponível por CDN ou npm como um script simples para o navegador.
  • 05Oferece suporte a títulos e rótulos para os eixos x e y.

Casos de uso

  • Adicionar um gráfico descontraído e informal a um post de blog ou apresentação.
  • Ilustrar estimativas ou planos em um estilo feito à mão, sem aparência corporativa.
  • Incorporar gráficos rápidos em uma página HTML estática sem etapa de build.

Início rápido

  1. 1

    Inclua o script chart.xkcd e um nó SVG na sua página

    <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script>
  2. 2

    Crie um gráfico de linhas com new chartXkcd.Line no elemento SVG

Em coleções

Frameworks frontend e componentes de interfaceCursos e ferramentas de ciência de dados

Tópicos

#chart#svg#data-visualization#javascript#hand-drawn#frontend#graph#html5#html5-charts#svg-sprite

Perguntas frequentes

O que é chart.xkcd?
Biblioteca JavaScript que renderiza gráficos de linhas, barras e outros em SVG, com um estilo esboçado à mão inspirado no xkcd. chart.xkcd é uma biblioteca JavaScript que desenha gráficos em um estilo cartunesco e “esboçado”, feito à mão e inspirado na tira xkcd. Os gráficos são renderizados em um único elemento SVG na página; basta incluir o script e apontá-lo para um nó <svg> para criar um gráfico.
chart.xkcd é gratuito? Qual é a licença?
chart.xkcd é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
chart.xkcd ainda é mantido?
Manutenção ativa. O último commit de chart.xkcd foi em 21 de out. de 2026.
Para que posso usar chart.xkcd?
Adicionar um gráfico descontraído e informal a um post de blog ou apresentação. Ilustrar estimativas ou planos em um estilo feito à mão, sem aparência corporativa. Incorporar gráficos rápidos em uma página HTML estática sem etapa de build.
Como instalar chart.xkcd?
Inclua o script chart.xkcd e um nó SVG na sua página: <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@2/dist/chart.xkcd.min.js"></script> Crie um gráfico de linhas com new chartXkcd.Line no elemento SVG
Onde consigo chart.xkcd?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/timqian/chart.xkcd

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados