A Comparison of Data Visualization Libraries for React

Similarities & differences between Recharts, Nivo, Victory, react-vis, & Viser

M. Ege Ercan
Oct 21, 2020 · 12 min read
overhead shot of two hands typing on silver keyboard, sitting on desk with gold and grey graphs
overhead shot of two hands typing on silver keyboard, sitting on desk with gold and grey graphs

TL;DR

The Gold Standard — D3

Problems with using D3 in React

Both React and D3 are two excellent tools designed with goals that sometimes collide. Both take control of user interface elements, and they do so in different ways.” — Marcos Iglesias, Bringing Together React, D3, And Their Ecosystem.

General Comparison Of Data Viz Libraries

My Approach for Elimination and Picking the Right Library

Research

table with black text and green, orange, yellow, and red cells
table with black text and green, orange, yellow, and red cells
Created by author. Note: Colors are relative to each library information listed here. * Recorded in June 2020 ** Total size occupied in node_modules directory after installing as a dependency *** BundlePhobia results for minified+gzipped size and download time for 2G edge.

Comparison

blue, green, red, purple, and orange text
blue, green, red, purple, and orange text
diagram of rated features in purple, orange, and red text boxes with green handwritten circles around black text within them
diagram of rated features in purple, orange, and red text boxes with green handwritten circles around black text within them
- Created by author.

A Quick Project

Recharts

Highlights

Documentation

Coding Style

black screen with lines of green, orange, blue, and yellow code
black screen with lines of green, orange, blue, and yellow code
- Created by author.
black screen wtih lines of white, blue, and purple code
black screen wtih lines of white, blue, and purple code
- Created by author.
graph with 2 overlapping polynomial curves in green and purple
graph with 2 overlapping polynomial curves in green and purple
- recharts.org

Victory

Highlights

Documentation

Coding Style

black screen with lines of green, orange, blue, and yellow code
black screen with lines of green, orange, blue, and yellow code
- Created by author.
black screen with lines of blue, white, and purple code
black screen with lines of blue, white, and purple code
- Created by author.
red line graph with grey axes
red line graph with grey axes
formidable.com/open-source/victory/

Nivo

Highlights

Documentation

Coding Style

black screen with lines of green, orange, and blue code
black screen with lines of green, orange, and blue code
- Created by author.
black screen with lines of purple, blue, and white code
black screen with lines of purple, blue, and white code
- Created by author.
orange line graph with grey axes
orange line graph with grey axes
- www.nivo.rocks

React-vis

Highlights

Documentation

Coding Style

black screen with lines of green, red, and blue code
black screen with lines of green, red, and blue code
- Created by author.
black screen with lines of blue, white, and purple code
black screen with lines of blue, white, and purple code
- Created by author.
grey grid with teal line graph
grey grid with teal line graph
- uber.github.io/react-vis/

Viser

Highlights

Documentation

Coding Style

black screen with lines of green, blue, orange, and yellow code
black screen with lines of green, blue, orange, and yellow code
- Created by author.
black screen with lines of purple, white, and blue code
black screen with lines of purple, white, and blue code
- Created by author.
blue line graph with grey axes
blue line graph with grey axes
- viserjs.github.io/

Performance Profiler Results of Data Viz Libraries

flamegraph with teal, orange, and green bars and black text
flamegraph with teal, orange, and green bars and black text
- Created by author.
screenshot of reload and start profiling button with orange arrow and blue dot
screenshot of reload and start profiling button with orange arrow and blue dot
- Created by author.
screenshot of reload and start profiling button with orange arrow and red dot
screenshot of reload and start profiling button with orange arrow and red dot
- Created by author.

Conclusion

Capital One Tech

The low down on our high tech from the engineering experts…

M. Ege Ercan

Written by

Software engineer working for Capital One • Living in Boston • Formerly a marine biologist specialized in dolphin behavior • Drummer for the band called Sinnet

Capital One Tech

The low down on our high tech from the engineering experts at Capital One. Learn about the solutions, ideas and stories driving our tech transformation.

M. Ege Ercan

Written by

Software engineer working for Capital One • Living in Boston • Formerly a marine biologist specialized in dolphin behavior • Drummer for the band called Sinnet

Capital One Tech

The low down on our high tech from the engineering experts at Capital One. Learn about the solutions, ideas and stories driving our tech transformation.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store