react-dynamic-charts — A React Library for Visualizing Dynamic Data
If you don’t have time to read the whole story, just browse to the GitHub repository below👇🏻
Background
A few months ago, we had a global company summit at the beautiful island of Tenerife. It was a great opportunity for all of us to meet and talk to our colleagues from around the world.
Another advantage of this event was that we had all of Outbrain’s R&D group in one place, meaning only one thing: A global CODE CHALLENGE!(!!)
In this code challenge, our engineers wrote code that competed each other in (probably) the biggest bidder coding competition in the world. It was a blast, but it’s a subject for a whole different blog post. In the following blog post I want to focus on a React library I created for this challenge in order to visualize the competition, and present who won.
Here’s how it looked like:
Surprisingly, it worked well! In fact, it worked so well that I realized other developers might enjoy it as well. So I open-sourced it 😎
react-dynamic-charts
react-dynamic-charts is a React library for creating dynamic charts visualizations based on dynamic data.
It was designed to be super flexible, and allows you as a developer to control each and every element and event inside.
react-dynamic-charts is a node module so in order to add it to your project just run:
npm install react-dynamic-charts --save
There are a few demos I created in order to show the various options and configurations to customize the design and behaviour of the charts, but the most basic example will look like as follows:
The example is pretty straight forward. Importing the library to your project (line 3), using the LiveBarChart component (line 15), passing data as a property (line 16) to the component.
Note: in order to use the library, you’ll need to import both component, and its CSS styles (line 4).
There are many properties you may use in order to customize the speed of transitions between each iteration, and the way the chart looks and behaves — all is well documented on GitHub
The “data” Prop
This is probably the most important property since all of the rest have defaults.
The data property is expected to be an array of objects. Each object will present an iteration and will include the following fields:
name — the name of the iteration (which will be presented at the top of the chart).
values — an array of data objects (see below).
Each value in the values array will contain the following properties:
id — A unique identifier for the item. Note that it should be consistent across all iterations.
label — The label of the item. Could be either a string, or a React component.
value — A numeric value of the item.
color (optional)— Set a fixed color for the item. Could be also an array of colors that will generate a gradient effect. By default, if not set, each item will get a random color.
Here’s an example of a data object:
And that’s basically it.
Star if you liked it, share if you found it useful.
If you have any comments or improvements you wish to add, you’re more than welcome to open feature requests (&& ||) pull requests :)
