OVO Tech Blog

Data visualisation libraries for React

Introduction

Aga Florek

Aga Florek

Software Engineer at OVO Energy


Data visualisation libraries for React

Posted by Aga Florek on .
Featured

Data visualisation libraries for React

Posted by Aga Florek on .

I've tried three libraries providing components for data visualisation with React: Recharts, React-vis and Victory. My main goal was to check how easily one can create clear, simple data visualisations, and adjust them to match their application or website styles. For the visualisations I used data about OVO Energy London offices. If you want to see full code used to generate charts in this blog post you can view the project github repo here

Installation

All three libraries are easy to install. You can do it with a single line npm command.

 npm install recharts 
 npm install react-vis 
 npm install victory 

Pie Chart

Pie charts below show number of employees in both OVO Energy offices in London.

Modyfing colors
As you can see all three libraries allow us to modify colors without writing any CSS. Variable 'COLORS' in the code snippets below is just an array with HTML color values in. Customisation is the easiest with Victory, where you can pass the array via component probs.
Modyfing labels
Recharts doesn't allow you to customise label text without using a custom label component, but it has out-of-the-box legend, which can provide missing data. Both Victory and React-Vis let you map and customise the label, React-Vis default placement of the label makes it a bit hard to read though.

Pies

Recharts
Pie
Victory
VictoryPie-1
React-vis
PieReactVis

Stacked Bar Chart with Legend

Stacked bar charts components are well made in all tested libraries.

Chart size
For Recharts and React-vis we need to provide height and width of the chart. Victory charts are responsive by default and adjust to the width of the parent container.
Legend
The Recharts legend component requires almost no effort to add as it has no required attributtes. This is true as well for Tooltip component in this library. Victory and React-vis legends need to have an additional information specified.

Victory_Demo

Recharts
rechartsbar
Victory
VictoryStacked
React-vis
VisStacked

Summary

All tested libraries are good for simple data visualisation. They provide well documented components and lots of examples. I would recommend Recharts for quick and effective visualisations. It has elegant Legend and Tooltip components. Documentation includes plenty of examples along with ready JsFiddle links. Victory is responsive by default, which is a very nice feature. You don't need to spend time implementing mobile and desktop version separately.

You can read more about these libraries here:
Victory: Formidable Victory
Recharts: Recharts
React-vis: React-vis

Aga Florek

Aga Florek

Software Engineer at OVO Energy

View Comments...