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.
Recharts
Victory
React-vis
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.
Recharts
Victory
React-vis
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