Como criar gráficos com Chart.js e React – Passo a passo

Vamos aprender passo a passo como criar gráficos com Chart.js e React, desde a configuração até a integração com uma API de vendas. No final, você terá um dashboard funcional que exibe dados atualizados em tempo real.

Se você está buscando uma forma de criar gráficos dinâmicos e interativos no React, utilizando dados de uma API, este post é para você!

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Introdução - Como criar gráficos com Chart.js e React!

Se você está no mundo do desenvolvimento web e fullstack, já deve ter ouvido falar de React e Chart.js. Essas duas ferramentas são amplamente utilizadas para criar interfaces modernas e visualizações de dados interativas.

Mas o que exatamente elas fazem, e por que são tão populares? Vamos explorar esses conceitos e entender como combiná-las para criar gráficos dinâmicos e poderosos.

O que é React?

React é uma biblioteca JavaScript de código aberto desenvolvida pelo Facebook\ para construir interfaces de usuário (UI) de forma eficiente e escalável.

Ele é amplamente utilizado para criar aplicações web modernas, especialmente aquelas que exigem atualizações frequentes de interface, como dashboards, redes sociais, ferramentas de análise de dados e até games.

A principal vantagem do React é sua abordagem baseada em componentes. Em vez de escrever todo o código em um único arquivo, você divide a interface em pequenos pedaços reutilizáveis, chamados de componentes, o que torna o código mais organizado, fácil de manter e testar.

Se quer mais tutoriais de React, temos conteúdos muito completos sobre essa biblioteca. E se você quer aprender React mas não sabe por onde começar, entenda o que você precisa saber de  JavaScript para aprender React.

O que é Chart.js?

Chart.js é uma biblioteca JavaScript que facilita a criação de gráficos interativos e responsivos. Com ela, você pode criar diversos tipos de visualizações, como gráficos de barras, linhas, pizza, radar e muito mais, sem precisar escrever código complexo do zero.

O Chart.js é altamente personalizável e funciona bem em conjunto com outras bibliotecas e frameworks, como o próprio React.

Uma das grandes vantagens do Chart.js é a simplicidade. Com poucas linhas de código, você pode criar gráficos bonitos e funcionais, integrando-os facilmente a aplicações web. Além disso, ele é leve e otimizado para desempenho, perfeito para projetos que exigem visualizações de dados em tempo real.

O que significa fazer gráficos com React e Chart.js?

Criar gráficos com React e Chart.js significa combinar o poder de uma biblioteca de UI moderna com uma ferramenta especializada em visualização de dados. O React gerencia a estrutura e a lógica da aplicação, enquanto o Chart.js cuida da renderização e interatividade dos gráficos.

Essa combinação é especialmente útil para construir dashboards e ferramentas de análise de dados. Imagine um painel que exibe vendas mensais, métricas de desempenho ou tendências de mercado. Com React e Chart.js, você pode criar gráficos que se atualizam automaticamente conforme novos dados são recebidos, proporcionando uma experiência dinâmica e interativa para o usuário.

Além disso, a integração entre essas duas ferramentas é facilitada por bibliotecas como o react-chartjs-2, que permite usar o Chart.js diretamente dentro de componentes React. Isso significa que você pode aproveitar toda a funcionalidade do Chart.js enquanto mantém a organização e a reutilização de código que o React oferece.

Por que usar React e Chart.js juntos?

1. Componentização: Com React, você pode encapsular gráficos em componentes reutilizáveis, facilitando a manutenção e a escalabilidade do código.
2. Interatividade: Chart.js oferece gráficos altamente interativos, com suporte a hover, zoom e animações, que podem ser facilmente integrados a uma aplicação React.
3. Atualizações em Tempo Real: A combinação de React (com seu Virtual DOM) e Chart.js permite que os gráficos sejam atualizados em tempo real sem recarregar a página.
4. Personalização: Ambos React e Chart.js são altamente personalizáveis, permitindo que você crie gráficos e interfaces que se adaptem às necessidades específicas do seu projeto.

O que você vai aprender aqui?

Neste post, vamos guiar você passo a passo na criação de um gráfico de barras dinâmico usando React e Chart.js. Você aprenderá a:

1. Configurar um projeto React do zero.
2. Instalar e configurar o Chart.js e o react-chartjs-2.
3. Criar um componente de gráfico de barras.
4. Integrar o gráfico com uma API de vendas para carregar dados dinâmicos.
5. Personalizar o gráfico e testar sua funcionalidade.

Ao final, você terá um gráfico de barras funcional que exibe dados atualizados em tempo real, pronto para ser incorporado em um dashboard ou aplicação web.

Atenção: Recomendamos que você tenha feito nossa última aula sobre React antes de prosseguir. Nela ensinamos como criar um CRUD completo com React, Node e  MongoDB!

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

Configurando o CORS no Backend

Antes de começar, é importante garantir que o backend esteja configurado para permitir requisições de diferentes domínios. Isso é feito através do CORS (Cross-Origin Resource Sharing). No backend, adicione o middleware do CORS que vimos na outra aula para permitir que o frontend (React) acesse os dados da API.

A diferença é que aqui nós precisamos atualizar o server.js com a linha

import cors from “cors”;

junto com as linhas de importação e

app.use(cors())):

antes da linha

app.use(express.json());

Criando a estrutura inicial do projeto React

Para começar, crie um novo projeto React usando Vite, uma ferramenta moderna para desenvolvimento frontend. Execute o comando:

npm create vite@latest

Escolha React como framework e JavaScript como linguagem. Em seguida, instale as dependências com npm install e inicie o servidor de desenvolvimento com npm run dev.

Limpando arquivos e códigos desnecessários

Após criar o projeto, remova os arquivos e códigos desnecessários. No diretório src, delete a pasta public, assets (dentro de src), delete o arquivo App.css e index.css e deixe os outros arquivos como estão disponibilizados nos arquivos na pasta aula.

Instalando e configurando o Chart.js no React

Para criar gráficos, abra o terminal no arquivo App.jsx e instale as bibliotecas Chart.js e react-chartjs-2:

npm install chart.js react-chartjs-2

Essas bibliotecas permitem integrar o Chart.js ao React de forma simples e eficiente.

Criando o componente do gráfico de barras

Agora, vamos criar o arquivo para o componente BarChart.jsx. Este componente será responsável por renderizar o gráfico de barras. Primeiro, importe os módulos necessários:

import { Bar } from "react-chartjs-2";
import { Chart as ChartJS, BarElement, LinearScale } from "chart.js";
import { useEffect, useState } from "react";
ChartJS.register(BarElement, LinearScale);

Em seguida, defina o componente BarChart e configure os dados e opções do gráfico.

Acessando a documentação do Chart.js

O Chart.js possui uma documentação extensa e detalhada. Se precisar de mais configurações ou personalizações, consulte a documentação oficial. Lá, você encontrará exemplos e explicações sobre todos os tipos de gráficos e opções disponíveis.

Integrando o gráfico com a API de vendas usando Fetch

Para integrar o gráfico com a API de vendas, utilize o Fetch API para buscar os dados. Dentro do componente BarChart, use o hook useEffect para fazer a requisição à API e atualizar o estado com os dados recebidos:

useEffect(() => {
  const carregarVendasMensais = async () => {
    const URI = "http://localhost:3000";
    const respostaFetch = await fetch(URI + "/vendas");
    const jsonRespostaFetch = await respostaFetch.json();
    setArrVendasMensais(jsonRespostaFetch);
  };
  carregarVendasMensais();
}, []);

Isso garantirá que os dados sejam carregados assim que o componente for montado. [Mostre uma imagem do código completo do useEffect e da função carregarVendasMensais.]

Testando e visualizando o gráfico de barras

Após configurar o componente e a integração com a API, teste o gráfico. Certifique-se de que os dados estão sendo carregados corretamente e que o gráfico é atualizado conforme as mudanças no banco de dados.

Conclusão

Criar gráficos dinâmicos no React com Chart.js e integrá-los a uma API é uma tarefa poderosa e recompensadora. Com esse conhecimento, você pode desenvolver dashboards interativos e visualizações de dados eficientes para seus projetos.

Se você gostou deste tutorial, não se esqueça de conferir nossos outros conteúdos incríveis sobre programação em JavaScript, HTML e CSS no nosso blog!