Bibliotecas de gráficos JavaScript: 13 opções populares

#1 – Chart.js

Chart.js é uma biblioteca de gráficos prática que usa <canvas> do HTML5 para renderizar os gráficos.

A biblioteca é facilmente a melhor escolha para projetos simples, por ser responsiva por padrão, e você também pode aplicar efeitos de animação com base no comportamento do usuário.

Aqui estão os 8 tipos de gráficos que você pode criar com Chart.js:

• Gráfico de área
• Gráfico de barras
• Gráfico de bolhas
• Gráficos de rosca e pizza
• Gráfico de linha
• Tipos de gráficos mistos
• Gráfico de área polar
• Gráfico de radar

No que diz respeito à facilidade de uso, a sintaxe é simples e, mesmo que você nunca tenha trabalhado com JavaScript antes, a criação de um novo gráfico é simples.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Se você quiser estender os gráficos com funções dinâmicas e pool de dados, a biblioteca possui um sistema de Plugins que você pode usar para adicionar novas funcionalidades.

Exemplo de Chart.js

Veja a prova de conceito da caneta: Chart.js com gradiente de fundo por Sven (@hofmannsven) no CodePen.

Recursos adicionais do Chart.js

• Chart.js + Next.js = belos painéis orientados por dados
• Introdução ao Chart.js; Aprendizado Baseado em Tarefas

#2 – D3.js

Deixe-me começar dizendo que o D3 é uma ferramenta de visualização de dados em vez de uma biblioteca de gráficos tradicional.

D3 permite especificar um conjunto de dados e vinculá-lo ao DOM, depois você pode usar as funções de bibliotecas para transformar esses dados em uma representação visual única. Quanto à apresentação visual, o D3 aproveita as tabelas HTML, SVG e <canvas> para renderizar os dados em uma página.

Se você já viu um desses globos giratórios baseados em localização geográfica com vários pontos de dados interativos, é provável que a apresentação tenha sido construída com D3. No entanto, também funciona bem para usos práticos, como o gráfico básico que você pode ver na demonstração abaixo. Em última análise, você deve consultar a seção Tutoriais oficiais do D3 para explorar seus recursos mais complexos.

Exemplo de D3.js

Veja o Pen D3 Chart + ReactJS por Web Dev (@ronaldmarin) no CodePen.

Recursos adicionais do D3.js

• Tutorial D3.js
• Criando um mapa de calor do calendário D3.js

#3 – Apache ECharts

Uma das razões pelas quais o Apache ECharts é tão popular é que você obtém acesso a centenas de exemplos de gráficos pré-fabricados diretamente da caixa. Você mesmo pode verificar isso visitando o diretório de exemplos. Esta página abrange gráficos e exemplos em categorias como linhas, barras, gráficos de pizza, dispersão, mapas de calor, gráficos e muito mais.

E todos os exemplos têm exemplos de código JavaScript e TypeScript incluídos. Mas isso não é tudo, existem alguns benefícios reais em usar esta biblioteca. Aqui estão alguns deles:

• Fluxo de dados. Quer criar gráficos interativos com milhões de pontos de dados? O ECharts usa WebSockets para transmitir dados para que possam ser carregados de forma assíncrona, mesmo com conjuntos de dados extremamente grandes.
• Compatível com dispositivos móveis. Quando os usuários visualizam um EChart em seus dispositivos móveis, o próprio gráfico foi otimizado para fornecer recursos interativos – zoom, panorâmica e renderização SVG para garantir a melhor entrega.
• Dados Dinâmicos. Você pode alimentar o ECharts com vários pontos de dados (separados), e a biblioteca animará automaticamente o gráfico para oferecer aos usuários uma experiência interativa.
• Acessibilidade. O Apache ECharts (v4.0 e superior) foi desenvolvido para seguir as diretrizes WAI-ARIA.

Você também pode exibir seus gráficos em seu site usando um CDN externo.

Exemplo de Apache ECharts

Veja o exemplo do Pen Apache Echart por Vale (@vsigno) no CodePen.

Recursos adicionais do Apache ECharts

• Crie uma ferramenta GitHub Insight melhor em uma semana

#4 – Trama

Plotly é a empresa-mãe da Dash, uma solução de baixo código para implantação de aplicativos de dados. E eles desenvolvem sua própria biblioteca gráfica – Plotly – nas instalações.

Com o Plotly, você pode criar as visualizações de gráficos mais básicas, mas o poder real da biblioteca está na capacidade de produzir gráficos baseados em estatísticas, representações de dados 3D e gráficos baseados em dados financeiros.

Ele está disponível como um módulo Node.js, mas também pode ser usado diretamente de uma CDN.

Exemplo de plotagem

Veja a anotação Pen Add on click event by plotly (@plotly) no CodePen.

#5 – Frappe

A biblioteca de gráficos Frappe é feita pelo pessoal que criou o Frappe Framework. Esta biblioteca é tão simples quanto possível. E essa simplicidade é um fator importante que contribui para a popularidade da biblioteca.

A biblioteca não requer dependências externas e pode renderizar gráficos SVG compatíveis com dispositivos móveis em apenas algumas linhas de código. Aqui está um exemplo de código para um gráfico de eixo básico:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

E esse pequeno trecho se traduziria em um gráfico como este:

Também há suporte para gráficos mistos (vários gráficos em um), anotações, mapas de calor e uma API está disponível se você planeja atualizar dados em tempo real ou exportá-los.

Exemplo de Frappe

Veja o Pen Frappe Hello World de Jang Rush (@weakish) no CodePen.

#6 – Gráficos Apex

ApexCharts é muito mais uma biblioteca de gráficos tradicional. A principal diferença entre ApexCharts e Frappe (por exemplo) é que ApexCharts fornece um pouco mais de demos. Mas também oferece suporte nativo para frameworks populares como React, Vue e Angular. Isso também significa que todos os gráficos de demonstração têm suas respectivas amostras escritas na sintaxe dos referidos frameworks.

Quanto aos recursos, todos os gráficos são gerados no formato SVG e são compatíveis com dispositivos móveis por padrão. Você também pode aproveitar recursos como animações suaves e anotações e personalizar sua paleta de temas de gráfico escolhendo um dos 10 estilos de amostra.

Exemplo de Gráficos Apex

Veja o Painel em tempo real da caneta por ApexCharts (@apexcharts) no CodePen.

#7 – G2

Recentemente, falei sobre o Ant Design em várias ocasiões, inclusive em meus artigos sobre bibliotecas de componentes para React.js e Vue. Não só o Ant é extremamente popular no GitHub, mas as comunidades os adoram em todas as regiões do mundo.

E a biblioteca de gráficos G2 (ou como eles chamam “Visualization Grammar”) é a implementação da Ant Design de um sistema de gráficos usando o Ant Design System. Eu recomendo verificar a página inicial do AntV, onde você encontrará muitas outras bibliotecas relacionadas à visualização de dados em tempo real.

Ele é usado com mais frequência para criar coisas como painéis de administração, criar caminhos de dados e criar exemplos interativos de visualização de dados usando seu mecanismo de renderização. Esse mecanismo pode renderizar gráficos e vetores de dados por meio de WebGL, Canvas e SVG. E como a biblioteca é conectável, você pode aprimorar ainda mais suas apresentações de gráficos por meio de bibliotecas mais robustas, como D3.js (que vimos anteriormente).

#8 – Visualização bruta

A biblioteca roughViz de Jared Wilber é uma combinação de 3 bibliotecas diferentes: D3.js, Rough.js e handy – um processador de esboços desenhados à mão. Como você pode ver na captura de tela de exemplo acima, esta não é sua biblioteca de gráficos típica. O roughViz foi desenvolvido inteiramente com o objetivo de ajudá-lo a criar gráficos em estilo de esboço desenhados à mão usando JavaScript.

Esse tipo de biblioteca será um ótimo complemento para projetos pessoais, em outras palavras – projetos que exigem uma centelha mais criativa do que a abordagem tradicional de estilo profissional. E a sintaxe em si é tão simples quanto poderia ser, muito alinhada com Frappe e ApexCharts.

Você pode ver isso por si mesmo na demonstração abaixo.

Exemplo de visualização bruta

Veja a demonstração do Pen RoughViz por Danny Englishby (@DanEnglishby) no CodePen.

#9 – Gráficos Leves

Se você está trabalhando em um projeto relacionado a finanças (ou criptomoeda para esse assunto), é bastante claro que muitas das bibliotecas de gráficos mencionadas anteriormente simplesmente não são suficientes. Como tal, aqui está o Lightweight Charts – uma biblioteca de gráficos criada especificamente para exibir gráficos e gráficos baseados em finanças.

Essa biblioteca não é apenas de código aberto e leve, mas também contém todos os recursos necessários para exibir dados de gráficos sobre finanças e sua estrutura dinâmica.

Um desses recursos é o streaming de dados, que permite passar dados em tempo real para sua tela e, em seguida, atualizá-los sem que o usuário precise atualizar a página. E outro fator que você pode estar considerando é o desempenho, que não deve ser um problema, conforme explicado na página inicial desta biblioteca,

“Nossas soluções de gráficos foram projetadas desde o início para trabalhar com grandes matrizes de dados. Os gráficos permanecem responsivos e ágeis, mesmo com milhares de barras, mesmo com atualizações várias vezes por segundo com novos ticks.”

Confira a demonstração abaixo para ter uma ideia, mas também muitas das opções e recursos do gráfico.

Exemplo de gráficos leves

Veja o gráfico avançado Pen tradingview de truong (@truong160196) no CodePen.

Recursos adicionais de gráficos leves

• Gráficos financeiros para sua aplicação

#10 – Painel

Billboard é uma biblioteca de gráficos de interface baseada em D3. Ele tem todos os recursos modernos que você espera – renderização SVG, suporte ao toque para dispositivos móveis, uma interface simples e excelente documentação de API.

No entanto, meu recurso favorito, e sem dúvida para muitos outros, também é que a Billboard fornece mais de 230 exemplos de gráficos que você pode criar com esta biblioteca. Esses exemplos são divididos em categorias de gráfico como Básico, Eixo, Dados, Grade, Interação, Região e muitos outros.

Isso significa que você pode não apenas encontrar o tipo de gráfico correto para seu projeto e seus requisitos, mas também explorar outras opções e ver se um exemplo específico chama sua atenção.

Exemplo de Billboard.js

Veja as Solicitações de Pen Chart – Billboard.js por DTCC (@dtcc) no CodePen.

#11 - Perspectiva

Perspective é um dos projetos que a FINOS (Open-Source Fintech) opera, e a própria FINOS também faz parte da Linux Foundation. Muito parecido com gráficos leves – o Perspective.js é orientado para fornecer soluções de gráficos para projetos baseados em finanças. No entanto, é capaz de muito mais do que isso e tem uso frequente em projetos relacionados a comércio eletrônico, grades de dados e segmentação de remessas.

Se você já viu gráficos sobre Covid-19, aeroportos e grandes eventos esportivos como as Olimpíadas, há uma boa chance de que a integração da interface e do fluxo de dados tenha sido feita com o Perspective. Possui uma interface de usuário rica, otimizada para fluxos de dados e análises complexas em tempo real.

Está disponível para desenvolvedores de JavaScript e Python e usa o componente Web de elementos personalizados.

#12 - Gráfico de interface do usuário do Toast

Se alguma coisa, a biblioteca de gráficos Toast UI é outra opção a ser considerada no que diz respeito aos estilos de gráfico e seu design. A funcionalidade aqui é muito semelhante às bibliotecas que já vimos.

Acho que a área em que a interface do usuário do Toast difere de outras opções é a especificação da API. É provavelmente uma das melhores APIs nas quais você pode colocar as mãos e vem com uma documentação detalhada complementar. Um dos recursos da API são as Instâncias , uma forma de você alterar dinamicamente os dados do gráfico porque sua fonte de dados foi alterada ou devido à entrada do usuário.

Os tipos de gráfico suportados pelo Toast incluem barras, colunas, linhas, áreas, bolhas, mapas de árvore, radares, barras radiais e outros. A maneira preferida de usar essa biblioteca é por meio do npm, mas um CDN está disponível e tudo o que você precisa fazer é especificar um contêiner div id="chart" para onde deseja que o gráfico seja exibido.

#13 – Recharts

Se você estiver trabalhando principalmente com React.js, a biblioteca Recharts é construída sobre D3.js com React. Ele respeita a arquitetura de componente nativa do React.js, e os gráficos criados com Recharts podem ser desacoplados e reutilizados como componentes individuais nas páginas que você precisar.

Todos os exemplos de gráficos têm sua estrutura de componentes pré-escrita caso você queira testá-los em um projeto existente. A biblioteca foi lançada pela primeira vez em 2016, mas ainda está em desenvolvimento ativo.

Exemplo de recharts

Veja os Pen ReCharts por binu (@binutomy) no CodePen.