Chegou a hora de você montar aquele dashboard super legal no seu sistema e por isso está em busca de uma biblioteca de gráficos para utilizar não é ?
Separei algumas das melhores bibliotecas javascript para facilitar essa sua nova feature!
Vamos lá?
ApexCharts.js
ApexCharts é uma biblioteca de gráficos moderna que ajuda os desenvolvedores a criar visualizações bonitas e interativas para páginas da web.
É um projeto de código aberto licenciado pelo MIT e é gratuito para uso em aplicativos comerciais.
Uma facilidade são os mais de 100 exemplos na documentação para você interagir e replicar em sua aplicação seja desktop web ou mobile, pois ela é totalmente responsiva.
Outra facilidade é que a biblioteca já possui pacotes preparados para os frameworks mais utilizados do mercado: Vue.js, React e Angular.
Acesse a documentação: https://apexcharts.com
Chart.js
O Chart.js também é outra biblioteca bastante conhecida e com uma infinidade de recursos e possibilidade de personalização para seus gráficos.
Também possui uma excelente documentação e uma simples implementação.
Chart.js está disponível sob a licença MIT, então você poderá utilizar tranquilamente em seus projetos.
Acesse a documentação: https://www.chartjs.org/
Apache Echarts
O Apache ECharts fornece mais de 20 tipos de gráfico disponíveis prontos para uso, junto com uma dúzia de componentes, e cada um deles pode ser combinado de forma arbitrária para uso.
O Echart possui uma comunidade ativa de código aberto que garante o desenvolvimento saudável do projeto e contribui com uma grande variedade(a quantidade é realmente incrível 😱) de extensões de terceiros.
Acesse a documentação: https://echarts.apache.org/en/index.html
D3.js
D3.js é uma biblioteca JavaScript para manipular documentos com base em dados. O D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS. A ênfase da D3 nos padrões da web oferece todos os recursos dos navegadores modernos sem se prender a uma estrutura proprietária, combinando componentes de visualização poderosos e uma abordagem orientada a dados para manipulação de DOM.
A quantidade de exemplos também é bastante significativa, despertando nossa criatividade na hora de fazer aquele dashboard maneiro!
Acesse a documentação: https://d3js.org/
G2Plot
G2Plot é uma biblioteca de gráficos interativa e responsiva baseada na gramática de gráficos, que permite aos usuários gerar gráficos estatísticos de alta qualidade através de algumas linhas de código facilmente.
Também como as outras bibliotecas possui uma boa quantidade de exemplos, inclusive bastante bonitos e agradáveis.
Acesse a documentação: https://g2plot.antv.vision/en
F2, nascido para celular
O F2 nasceu para dispositivos móveis, desenvolvido tanto para desenvolvedores quanto para designers. É baseado em Html5 Canvas e também é compatível com Node.js, Weex e React Native. Com base na gramática dos gráficos, F2 fornece todos os tipos de gráficos de que você precisa. Nossas diretrizes de design móvel permitem uma melhor experiência do usuário em projetos de visualização móvel.
Possui muitos exemplos, porém uma dificuldade pode ser que nem toda a documentação está traduzida para inglês.
Acesse a documentação: https://f2.antv.vision/en
Chartist.js
Você pode pensar que esta é apenas mais uma biblioteca de gráficos. Mas Chartist.js é o produto de uma comunidade que ficou desapontada com as habilidades fornecidas por outras bibliotecas de gráficos.
Os fatos a seguir devem fornecer uma visão geral do porquê escolher cartistas como seu gerador de gráficos front-end:
- Manuseio simples ao usar convenção sobre configuração
- Grande flexibilidade ao usar a separação clara de interesses (estilo com CSS e controle com JS)
- Uso de SVG (sim! SVG é o futuro da ilustração na web!)
- Totalmente responsivo e independente de DPI
- Configuração responsiva com consultas de mídia
- Totalmente construído e personalizável com Sass
Acesse a documentação: https://gionkunz.github.io/chartist-js/
E aí curtiu ? Compartilha com seus amigos Devs e comunidades que você faz parte.
Caso conheça alguma biblioteca legal, deixa aqui nos comentários também.
Até a próxima ❤
