Skip to content

Plotting Library Comparison

Jump to bottom
Goel Biju edited this page Nov 3, 2020 · 7 revisions

Requirements

A plotting/charting library is required for the DataGateway project in order to visualise the data that will be provided to the user.

The plotting library will be selected on the basis of:

  • ease of use,
  • documentation,
  • support/large user base,
  • chart types,
  • flexibility for styling/behaviour customisation.

Some of the specific charts/graphs that we may need to include:

  • library license should meet our requirements and we do not want a commercial library (i.e. MIT license would be ideal),
  • should have basic charts/or be easy to create basic charts: bar, pie, line etc.,
  • should not take a lot of code to create more complex graphs i.e. chloropleths/maps,
  • graphs could be interactive and can be customised to our needs.

In addition to this, a good overview of the charts mentioned is also mentioned in this article. The article also highlights a table of the types of charts the libraries offer (basic, scientific, financial and statistical).

Candidate libraries

There are a handful of libraries that are made for plotting with React. The selected candidates are among the most popular and widely reviewed:

There are others that may be considered at a later point:

Libraries comparison

Nivo

PROS CONS
Provides thorough documentation to allow users to test charts and view direct code interactively Community is not as large as recharts/react-vis etc.
Easy to import in required modules only Not maintained by large firm/group
Uses props over components to create the charts High-level components only and cannot create custom one from components
Wide number of charts components available (https://nivo.rocks/components) (built on D3 and reactjs)
Offers charts in SVG and canvas to handle mass amounts of data points
Provides the charts needed out of the box

VERDICT: Thorough documentation with interactive editor which means you can customise in browser. Many types of charts offered as high-level. This is ideal for a quick setup if no knowledge of D3 is needed.

Recharts

PROS CONS
Charts are composable and not just fixed on high-level components Not a great variety offered except basics: Area, Bar, Line, Pie, Radar, RadialBar, Scatter, Funnel, Treemap
Very popular library (one of largest on NPM) and has a large community

VERDICT: Is composable from different components. Not a wide variety of charts available but all basic are present.

react-vis

PROS CONS
Backed by Uber and has large community on GitHub Similar to recharts offers basic charts
Is composable and and build from the basic chart types
Offers charts in SVG or canvas (similar to Nivo)
Most active in terms of development on GitHub

VERDICT: Backed by Uber and has a large community, offers largest variety of charts but may not offer what we require. This is the most comprehensive library and is suggested unless we have requirements to have specific charts.

Victory

PROS CONS
Large userbase on GitHub (similar in size to Nivo but less than recharts/react-vis) Supports composing and building upon basic chart types, however, does not offer
Composable react components

VERDICT: Similar to recharts/react-vis in that it is composable, again, not a great variety offered though very popular with the charts it has.

VX

PROS CONS
Custom tailored to requirements and similar to working with D3.js Requires a lot of code in order to create charts

VERDICT: Similar to using D3 and requires a lot of extra work to create charts, however, if we have specific requirements for the type of charts we need then this is ideal.

D3.js

https://github.com/d3/d3/wiki/Gallery

PROS CONS
Get the exact customisation you need as you are working more lower-level than other libraries Have to manually do styling/CSS/chart functionality

VERDICT: A lot of manual work involved but the closest to custom charts/graphs. May not be too relevant since we do not want overly complex/customised graphs.

Clone this wiki locally