Bar Chart in React with @vx

This is part 1 of the Data Visualization with React and @vx series

  1. 1) Bar Chart in React with @vx
  2. 2) Create a Single Line Chart in React with @vx

Update: October 2020 - @vx is now @visx and is at 1.0. You can read about the update from Airbnb Engineering. As of this update, the api is all the same, and it has TypeScript support 👍.

What We're Building TL;DR

Data visualization is steadily becoming more valuable to companies as they try to understand all the data they have coming in. There are a lot of different solutions for data visualization in javaScript, d3 being one of the most popular.

When working in React it can be frustrating to handle d3 since they tend to compete for the DOM. There is a solution that we've been using for a little while at Sprinklr to help with this.

That solution is the library @vx. It's a set of base components in React that wrap d3, made to build a charting library from. There are some great helpers rolled up in the components that make working with svg's much better. It hasn't been released as stable quite yet but it works for our purposes.

Today we're going to focus on building a bar chart component. Here are the requirements for this component.

  • Can take an array of single dimension data
  • Render each item on a shared scale
  • Should have a x and y axis

Packages

Let's start by getting the packages we need from @vx. Well need shapes, scale, axis, gradient (easy background color), and some mock data to get started.

Or

Data

Now that we have our packages we can start stubbing out our data. We're going to use some mock data to get started so feel free to create your own or use this data set.

Now that we have the shape of our data we can add some helper functions that will access those items. This will help us add the labels across the x-axis, and the values along the y-axis. We'll see how these come into play a little later.

Scales

We can now define the max height and max width that we would like our chart to be. Our component will take height and width as props, and then we can add a little padding. This will help us as we define our scales for this chart.

The scales are where the magic really happen. It took me a while to understand what the domain and range in d3 were all about. The general rule of thumb based on my understanding is that domain is the lowest and highest data points. The range is the pixel range we would like to plot these data points on.

In our scales below we can see that range (rangeRound) is from 0 to xMax which is the height bound of our chart. @vx gives us a helper, rangeRound, that prettifies the numbers.

The domain is an array of all data points which resolves to lowest (2000) and highest (7000) of the data set.

The padding is another helper from @vx that adds banding or space between and the width of the bars for us.

Bar Chart

Cool, let's build the component! We'll start by setting up the svg and Group to hold our chart. The Group helps us place the axes and the bars.

  • Can take an array of single dimension data

Looks good. The first thing we'll add is the y-axis. To do this we use AxisLeft from @vx. We need to pass it our yScale, and we'll give it a few other props for styling. The prop left pushes the axis over enough to show the label and the numTicks limits the number of values shown on the y-axis.

Then we'll add the AxisBottom that has similar props to AxisLeft. It should look like this:

  • Should have a x and y axis

Now we can loop over the data and return the bar. The width, height, and x are all using the scale to determine where they would be plotted in the graph.

  • Render each item on a shared scale

Finish

Nice! It should be good to go. We're going to add in the LinearGradient for a background color as well. Here it is all together:

Bonus

Add a little smoothness to your bars with a css transition like:

This way, when the data changes it will move to the next height smoothly.

CategoryDev
Discuss this article on Twitter