Bibliotecas de gráficos React comparadas: um gráfico, seis bibliotecas

Comparação de bibliotecas de gráficos React

Bibliotecas de gráficos React: o mesmo gráfico em 6 bibliotecas, medido | We.Inc

Recharts, Chart.js, Nivo, Victory, visx e ECharts comparadas construindo o mesmo gráfico de barras em cada uma, com código para copiar e tamanhos de bundle medidos. Escolha a biblioteca de gráficos React certa.

Para a maioria dos dashboards em React, Recharts é o começo mais rápido e Chart.js entrega um bundle menor, desenhado em canvas. Escolha visx para designs totalmente personalizados com o menor tamanho, Nivo para padrões caprichados, Victory se você também mira React Native, e ECharts para gráficos muito grandes ou complexos. Construímos o mesmo gráfico em cada uma e medimos.

Versão curta

Se você quer
Escolha

Gráficos rápidos a partir de componentes
Recharts

Bundle pequeno, muitos pontos de dados

Um design todo seu

Datasets enormes, mapas, muita interação
ECharts

Todas as bibliotecas abaixo desenham o mesmo gráfico de barras de seis meses a partir dos mesmos dados. Empacotamos cada uma separadamente e medimos o resultado, então a tabela de tamanhos compara coisas equivalentes. O exemplo de Recharts também roda ao vivo nesta página.

Confira a tabela de tamanhos em relação ao orçamento de peso da sua página.
Leia a comparação de renderização (SVG ou canvas) e de estilo de API.
Copie o exemplo da biblioteca escolhida e troque pelos seus dados.
Adicione um resumo em texto ou uma tabela com os números para quem usa leitor de tela.

Carregue os gráficos de forma lazy (React.lazy) quando ficarem abaixo da dobra, para não deixarem a primeira visualização lenta.
Gráficos em canvas são uma única imagem para a tecnologia assistiva; dê a eles um aria-label e uma tabela de dados por perto.
Passe objetos de dados e de opções estáveis (useMemo) para que os gráficos não sejam redesenhados a cada renderização do pai.
Defina uma altura explícita no pai dos gráficos responsivos, senão eles renderizam com altura zero.

Perguntas frequentes

Qual é a melhor biblioteca de gráficos para React?

Depende da tarefa. Recharts serve para dashboards típicos, Chart.js para muitos dados com um bundle pequeno, visx para designs sob medida e ECharts para gráficos complexos e cheios de dados. A tabela de tamanhos aqui mostra o custo de cada uma.

Recharts ou Chart.js, qual é melhor?

Recharts é mais natural no React porque os gráficos são componentes e renderizam como SVG que você pode estilizar. Chart.js desenha em canvas, lida bem com muitos pontos e teve menos da metade do tamanho no nosso teste.

Essas bibliotecas de gráficos são gratuitas para uso comercial?

Sim. As seis são open source: Recharts, Chart.js, Nivo, Victory e visx sob a licença MIT, e ECharts sob Apache 2.0.

As bibliotecas de gráficos React funcionam com Server Components?

Elas desenham no navegador e usam effects ou refs, então o componente do gráfico precisa de "use client". Os dados ainda podem ser buscados em um Server Component e passados como props.

Como medimos

Cada exemplo desta página foi empacotado sozinho com esbuild em modo de produção, minificado como módulo ES sem React e React DOM, e depois comprimido com gzip no nível 9. Apps reais compartilham código entre gráficos, então um segundo gráfico do mesmo tipo acrescenta bem menos.

Tamanho do bundle, medido

Medido: um gráfico de barras, minificado e com gzip (React não incluído)

Biblioteca
Versão
Minificado
Com gzip

68.7 KB
24.6 KB

Chart.js + react-chartjs-2
154.1 KB
54.2 KB

Nivo (@nivo/bar)
267.6 KB
93.8 KB

Recharts
384.8 KB
116.0 KB

Victory
424.3 KB
135.1 KB

ECharts, import modular (echarts/core)
558.2 KB
193.3 KB

ECharts, import completo
1,180.4 KB
399.9 KB

Lado a lado

Como elas diferem

Biblioteca
Desenha com
Estilo de API
Licença
Ideal para

Recharts
SVG
Componentes React (BarChart, XAxis, Bar)
MIT
Dashboards em React com pouca configuração

Canvas
Objeto de configuração, wrapper para React
MIT
Muitos pontos, bundle pequeno, visual familiar

Nivo
SVG, canvas ou HTML conforme o gráfico
Um componente por gráfico, muitas props
MIT
Padrões caprichados, muitos tipos de gráfico

Victory
SVG
Componentes combináveis
MIT
Gráficos compartilhados com React Native

SVG
Peças de baixo nível (escalas, formas, eixos)
MIT
Designs personalizados, menor bundle

ECharts
Canvas ou SVG
Um único objeto de opções grande
Apache-2.0
Grandes datasets, mapas, gráficos interativos complexos

O mesmo gráfico em seis bibliotecas

Os dados que todos os exemplos usam

Seis meses de visitas a um site. Cada biblioteca abaixo desenha o mesmo gráfico de barras com eles.

Recharts

Montado com componentes que se leem como o próprio gráfico: um eixo x, um eixo y, um tooltip, barras. ResponsiveContainer faz o gráfico ocupar a largura do pai. O gráfico ao vivo ao lado é este código.

Chart.js com react-chartjs-2

Chart.js permite tree-shaking, então você registra só as peças que o gráfico usa. Ele desenha em um canvas, que continua rápido com milhares de pontos mas precisa de um texto acessível próprio.

Nivo

Um componente com muitas props e padrões bonitos. ResponsiveBar precisa de um pai com altura definida.

Victory

Componentes SVG combináveis. A mesma API existe para React Native (victory-native), o que ajuda quando a web e o app compartilham código de gráficos.

Menos uma biblioteca de gráficos e mais um conjunto de blocos: você cria as escalas e desenha as barras. Mais código, controle total e o menor bundle do nosso teste.

ECharts (import completo)

Tudo fica em um único objeto de opções. Importar echarts-for-react traz o ECharts inteiro, que é o maior bundle aqui.

ECharts (import modular)

Importe de echarts/core e registre só o gráfico, os componentes e o renderizador que você usa. No nosso teste isso reduziu o bundle mais ou menos pela metade.

Precisa de um lugar para colocar os gráficos? Comece pelos nossos

layouts de dashboard

Gráfico de barras de visitas mensais: jan 1,200, fev 1,650, mar 1,420, abr 2,100, mai 2,480, jun 2,310

jan

mar

abr

mai

jun

Comece grátis · Sem cartão de crédito