Artigo original: https://www.freecodecamp.org/news/these-are-the-best-javascript-chart-libraries-for-2019-29782f5e1dc2/

Primeiro, uma breve história:

Com a coleta e utilização de dados seguindo em seu aumento exponencial, a necessidade de visualizar estes dados está se tornando cada vez mais importante. Os desenvolvedores procuram consolidar milhões de registros de bases de dados em belos gráficos e painéis que os humanos possam interpretar de maneira rápida e intuitiva.

A tecnologia de visualização de dados continuou a melhorar na última década e muitas bibliotecas de gráficos avançadas estão agora disponíveis para os consumidores. No início dos anos 2000, a geração de gráficos era dominada por gráficos de imagens bitmap do lado do servidor. Plug-ins como o Flash e o Silverlight ofereciam uma experiência de criação de gráficos mais interativa, mas com um grande impacto na velocidade de transferência, na duração da bateria e nos recursos do sistema.

Com a explosão da utilização de dispositivos móveis e tablets, os plug-ins deixaram de ser suportados nas principais plataformas e os desenvolvedores tiveram de mudar para tecnologias abertas do lado do client que podiam ser executadas em qualquer lugar. Ao mesmo tempo, o advento de telas de resolução muito alta e o zoom mais comum através de gestos tácteis trouxeram para a primeira linha os gráficos vetoriais independentes da resolução.

Chegamos na era atual da visualização de dados, dominada pelo JavaScript e pelo SVG (Gráficos Vetoriais Escaláveis). Os gráficos são agora executados em todos os navegadores, sem plug-ins especiais, suportam interatividade e animações e têm um aspecto nítido mesmo nos dispositivos de resolução mais elevada. Ao analisar mais de 50 bibliotecas de visualização, estes 9 produtos destacaram-se:

D3.js

S6EaFX5GX8yUIDvllrXDeYc2fONsQL-8jMUL

D3.js é uma biblioteca gráfica do JavaScript muito extensa e poderosa. Permite associar dados arbitrários a um Modelo de Objeto de Documento (DOM) e, em seguida, aplicar transformações baseadas em dados ao documento.

O D3 vai muito além das típicas bibliotecas gráficas, incluindo muitos outros módulos técnicos menores, tais como eixos, cores, hierarquias, contornos, suavização, polígonos e muito mais. Tudo isto contribui para uma curva de aprendizagem acentuada.

Tentar criar um simples gráfico pode ser complicado. Todos os elementos incluindo eixos e outros itens do gráfico precisam ser explicitamente definidos. Muitos modelos mostram como o CSS pode ser utilizado para dar estilo aos elementos do gráfico. Nenhuma característica baseada em gráficos é aplicada automaticamente. Se quiser ir mais longe e utilizar a criatividade para controlar totalmente cada elemento, esta é a melhor opção. Ao trabalhar em horário reduzido para cumprir os requisitos de um projeto de visualização de dados, pode não ser a melhor opção para começar do zero.

O D3.js pode ser um bloco de construção para uma biblioteca de gráficos. Os desenvolvedores vêm utilizando o D3 para facilitar a utilização de soluções de gráficos que o consomem, como o NVD3.

O D3.js é de código aberto e de utilização gratuita.

JSCharting

hTX6DIAPWYObB4LCQ--zfJIRrW1q85peGy3A

A biblioteca de gráficos JSCharting suporta muitos tipos de gráficos, incluindo mapas, gráficos de Gantt, mapas em estoque e outros que frequentemente requerem bibliotecas separadas para serem utilizados. Inclui mapas incorporados de todos os países do mundo e uma biblioteca de ícones SVG. Um conjunto de micrográficos autónomos pode ser apresentado em qualquer etiqueta de gráfico ou em qualquer elemento div numa página. Os controles de IU (UiItems) também estão incluídos, permitindo gráficos interativos mais ricos. É fácil controlar os dados ou as variáveis de visualização em tempo real e os gráficos podem ser exportados para os formatos SVG, PNG, PDF e JPG.

A galeria está dividida em amostras de tipos de gráficos e de características. O estilo do gráfico é polido e produz alguns gráficos de aparência limpa. Os visuais gerais proporcionam uma experiência de gráficos limpa e profissional.

Os modelos incluídos utilizam um objeto de configuração para personalizar os gráficos. As definições para criar e controlar os tipos de gráficos são muito simples de utilizar. São necessárias poucas definições de propriedades para especificar tipos de gráficos mais complexos. O JSCharting tem predefinições fortes e dinâmicas, o que significa que tenta escolher automaticamente as melhores definições para os cenários.

A documentação inclui muitos tutoriais e descrições completas das propriedades da API. Muitas propriedades incluem exemplos de utilização e ligações de amostra.

O JSCharting é gratuito para utilização não comercial e pessoal e oferece opções de licença comercial que incluem todos os tipos de gráficos e produtos por uma única taxa.

Highcharts

2syqkeQ3kQi2mhDSFfsqV57jiG810QWR7b7G

Highcharts é uma biblioteca popular de gráficos do JavaScript utilizada por muitas das maiores empresas do mundo. Os gráficos são gerados usando SVG e recorrem à VML para compatibilidade com versões anteriores até o IE6/IE8. Os gráficos de teste demonstram um conjunto de recursos bastante rico, mas não impressionam visualmente. A documentação geral inclui tutoriais para muitos tópicos relevantes e a documentação da API é completa.

O gráfico utiliza opções de configuração para criar gráficos e a API é fácil de utilizar.

O Highcharts é gratuito para utilização não comercial e pessoal. O licenciamento comercial é necessário para outras utilizações e os gráficos de stock, de mapas e gráficos de Gantt são licenciados de forma separada.

amCharts

g5AOK1ltx8xdH2JFXp3iw7fcZAYJ5pthfFdG

O amCharts lançou recentemente a sua versão 4, que adiciona um forte motor de animação SVG que permite criar cenas semelhantes a filmes.

Os gráficos de teste têm uma aparência muito agradável. A maioria dos testes oferece uma série de paletas e uma IU deslizante para ajustar as variáveis do gráfico em tempo real. A documentação inclui muitos tutoriais e descrições completas das propriedades da API.

A criação de um gráfico é um pouco diferente da abordagem baseada na configuração e, em vez disso, utiliza uma API mais declarativa. Requer um pouco mais de código para configurar os gráficos, mas oferece uma melhor experiência de preenchimento de código.

O amCharts oferece uma licença gratuita com gráficos marcados e licenças pagas para outras utilizações.

Google Charts

fPisdLR3HjGBrfbCAzc75uXc5IO9wsf2wj-f

Os gráficos do Google são poderosos e fáceis de utilizar.

Os exemplos de gráficos têm um aspecto limpo e são agradáveis à vista. A galeria e a galeria expandida mostram muitos tipos de gráficos, mas pressionar o menu de hambúrguer revela mais tipos (como o calendário) que não são mostrados nestas listas da galeria.

Cada tipo de gráfico tem um tutorial dedicado com exemplos ao vivo. Os tutoriais incluem código para os recursos relacionados e listagens de API. Esta é uma experiência agradável para começar com uma nova biblioteca de gráficos.

Os gráficos são personalizados utilizando o objeto de opções de configuração. Os conjuntos de dados são preenchidos usando uma classe DataTable que pode ser consumida por todos os gráficos. Cada tipo de gráfico tem opções únicas listadas nos tutoriais específicos do tipo. A nomeação de propriedades é padronizada e muitas opções funcionam em todos os tipos.

Os Gráficos do Google são gratuitos, mas há uma ressalva. Trata-se de um serviço da web e não pode ser hospedado localmente. No passado, a Google retirou as APIs. Por isso, se a sua utilização for de missão crítica, poderá querer escolher outra opção.

ZingChart

7UxG9uthgcsC-fYPf0GEXgJY6A3X6C187ggy

O ZingChart oferece muitos tipos de gráficos e integra-se com Angular, React e outros frameworks. Ele tem um forte conjunto de recursos com muitas opções de personalização.

Os gráficos de teste mostram uma série de temas de estilo, alguns dos quais parecem ser melhores que outros, mas as opções para os estilizar conforme necessário estão lá. Os gráficos de teste não apresentam todos os tipos de gráficos disponíveis.

A documentação inclui tutoriais para todos os tipos disponíveis, um bom número de funcionalidades e uma listagem completa da API.

O ZingChart usa opções de configuração para personalizar os gráficos. As amostras incluem muitas configurações de propriedade, como estilo de fonte. Elas podem atrapalhar a compreensão de quais configurações são necessárias para um determinado gráfico.

O ZingChart pode ser utilizado gratuitamente com a marca. Está disponível um licenciamento pago para utilização sem marca.

FusionCharts

b7k3uk0H59ImJz2wBVa6zBRCx8J6euicz1ZW

O FusionCharts existe há muitos anos, tendo começado como um plug-in de gráficos baseado em Flash. É uma biblioteca de visualização de gráficos robusta. Suporta muitos formatos de dados, incluindo XML, JSON e JavaScript, funciona em navegadores modernos e é compatível com versões anteriores ao IE6. Muitas das estruturas do JavaScript e linguagens de programação laterais do servidor também são suportadas.

A galeria de gráficos inclui muitos exemplos e o seu aspecto visual é simples.

A documentação inclui boas descrições da API e exemplos de cada tipo de gráfico. As propriedades de configuração estão agrupadas por tarefas e características do gráfico.

Os gráficos são criados utilizando opções baseadas na configuração e são relativamente fáceis de utilizar. A lista de propriedades pode ser longa quando nos aprofundamos na API. Todas as propriedades de configuração são superficiais, como {chartLeftMargin, showAlternateHGridColor}. Parece uma tentativa de melhorar o preenchimento de código.

O FusionCharts é gratuito para utilização pessoal com a marca no gráfico. Está disponível um licenciamento pago para utilização comercial e sem marca.

KOOLCHART

3iWJw51bCnMDw4QKpjP-0k-lZsoX0DUNnzL5

O KoolChart é uma biblioteca de gráficos de JavaScript baseada na tela do HTML5. Também está disponível um produto de mapeamento e grade.

A sua nova versão v5 inclui um conjunto de funcionalidades mais interativas e um estilo atualizado. Os visuais são limpos e modernos. A utilização de telas oferece um melhor desempenho em detrimento do fato de ser baseado em dados de rasterização.

As amostras utilizam um XML baseado em cadeias de caracteres para aplicar opções de gráficos, o que parece menos prático do que outros modelos. Estas opções assemelham-se ao HTML5, mas são definidas através de uma instrução em JavaScript.

A API está bem documentada com exemplos de gráficos para cada propriedade. Também está disponível um manual em PDF de 173 páginas.

Está disponível um período teste de dois meses para avaliação. O licenciamento é necessário após a expiração do período teste.

Chart.js

ewHuQvOha7Jgzn2rLM8jzoz5caFNhU7IuQCw

O Chart.js é uma biblioteca do JavaScript de código aberto que suporta 8 tipos de gráficos. É uma pequena biblioteca do JS, com apenas 60kb. Os tipos incluem gráficos de linhas, gráficos de barras, gráficos de área, radar, gráficos de tartes, bolhas, gráficos de pontos e mistos. Uma série temporal também é suportada. Utiliza o elemento da tela para renderização e é responsivo ao redimensionamento da janela para manter a granularidade da escala. É compatível com versões anteriores ao IE9. Estão disponíveis polyfills para funcionar também com o IE7.

As amostras visuais possuem um aspecto bastante moderno e incluem animações iniciais quando se desenha pela primeira vez. Faz a animação tranquilamente quando se adicionam séries ou pontos de dados em tempo real. As opções do gráfico podem ser modificadas depois e a chamada de uma função update() redesenha o gráfico.

O código-fonte de amostra não é apresentado na galeria do site, mas está disponível no repositório do GitHub. As opções de configuração são utilizadas para criar e modificar gráficos. A API de opções é limpa e intuitiva.

A documentação é completa e inclui tutoriais com a API de propriedades e trechos de código.

O Chart.js é uma biblioteca de código aberto e de utilização gratuita para uso pessoal e comercial, o que é uma vantagem. O número limitado de tipos pode ser um problema para requisitos de painéis de controle mais avançados.

Conclusão

O ecossistema de bibliotecas gráficas JavaScript evoluiu consideravelmente ao longo da última década. Atualmente, existem muitos produtos de gráficos que atendem a requisitos muito diversos, servindo a uma ampla gama de projetos por meio de centenas de tipos de gráficos. A maioria das bibliotecas fornece uma versão teste gratuita ou uma versão marcada que permite avaliar a eficácia gráfica com os seus próprios dados, carregamento e complexidade do projecto.

É fácil para a maioria das bibliotecas de gráficos lidar com conjuntos de dados curados simples e visualizações estáticas. No entanto, os gráficos nem sempre lidam bem com as coisas quando são visualizados dados dinâmicos do mundo real. Pode ser necessário mais trabalho para ajustar e organizar os elementos para que os gráficos pareçam corretos. Este ajuste manual pode falhar à medida que novos dados dinâmicos são visualizados.

Para selecionar a melhor solução de gráficos JS para as suas necessidades específicas, recomendo que teste os seus próprios dados com algumas das bibliotecas listadas acima para garantir a opção ideal para os seus projetos atuais e futuros.