Fast D3 based charts with ReactEasyChart

Wed 23rd Mar

D3.js is a fantastically versatile data visualisation library, but as we know with great power and flexibility comes great complexity (or something like that). The complexity of developing D3 based charts and graphs often means that even experienced Javascript developers can take days getting up to speed on making simple graphs. So here in the Labs at RMA we thought creating a library of regularly used charts and graphs would be a great idea.

RMA Consulting - Easychart press release image

Simplicity was the goal – to create an easy to use set of declarative components that don’t need the developer to remember the D3.js API, or have to re-create similar code every time they need a graph (like all good developers we don’t like to see repetition!). We wanted a robust and flexible solution that also allows for a large degree of customisation. And, as we use React a lot these days, we wanted to utilise the power of D3 whilst still adhering to the principles behind that library.Our ReactEasyChart library is available on GitHub and npmjs.com. It is a set of react graphing components that allow a developer to create and implement a graph very quickly (minutes, not days) and easily within a React application.

Every graph in the library has the following features:

Easy to set-up: you only need to pass in data to render a chart
Realtime data feed support: the charts automatically update when the data passed into the props changes
Fast rendering: using React means we minimise the changes to the DOM as a result of data or props changes
Configurability: configure and style each chart by using props to allow features such as grids, width, height and axis
Responsive and reactive: graphs to fit to any device
Easy interactivity: add interactivity via mouse and click events to build interesting applications without graphing knowledge.

We’ve concentrated on making an API that is consistent across the set of graphs. This means different graphs can be chosen for the same data set. Currently we provide a bar, line, area, scatter and pie chart. View the full range of charts available here.

We look forward to seeing how it is used and built on by other chart-mad developers. Happy charting!