Joel M. Turner

Illustration

Blog

Notes

Bar Chart in React with @VX

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 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.

1yarn add @vx/shapes @vx/group @vx/scale @vx/axis @vx/gradient

Or

1npm install @vx/shapes @vx/group @vx/scale @vx/axis @vx/gradient --save

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.

1const defaultData1 = [
2 {
3 label: "Happy",
4 value: 4000
5 },
6 {
7 label: "Sad",
8 value: 2000
9 },
10 {
11 label: "Angry",
12 value: 3000
13 },
14 {
15 label: "Joyful",
16 value: 4500
17 },
18 {
19 label: "Anxious",
20 value: 7000
21 }
22];

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.

1// accessors return the label and value of that data item
2const x = d => d.label;
3const y = d => d.value;

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.

1// bounds
2const xMax = width - 80;
3const yMax = height - 80;

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 prettyifies 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.

1// scales
2const xScale = scaleBand({
3 rangeRound: [0, xMax],
4 domain: data.map(x),
5 padding: 0.4
6});
7
8const yScale = scaleLinear({
9 rangeRound: [0, yMax],
10 domain: [Math.max(...data.map(y)), 0]
11});

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.

1import React from "react";
2import { Group } from "@vx/group";
3import { LinearGradient } from "@vx/gradient";
4import { scaleBand, scaleLinear } from "@vx/scale";
5import { AxisLeft, AxisBottom } from "@vx/axis";
6
7// accessors return the label and value of that data item
8const x = d => d.label;
9const y = d => d.value;
10
11function BarChart({data, width, height}) {
12
13// bounds
14const xMax = width - 80;
15const yMax = height - 80;
16
17// scales
18const xScale = scaleBand({
19 rangeRound: [0, xMax],
20 domain: data.map(x),
21 padding: 0.4
22});
23
24const yScale = scaleLinear({
25 rangeRound: [0, yMax],
26 domain: [Math.max(...data.map(y)), 0]
27});
28
29return (
30 <svg width={width} height={height}>
31 <Group top={25} left={55}>
32 </Group>
33 </svg>
34)}
35
36export default BarChart;
  • 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 LeftAxis 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 to AxisLeft. It should look like this:

1<Group top={25} left={55}>
2 <AxisLeft left={10} scale={yScale} numTicks={4} label="Times Expressed" />
3 <AxisBottom scale={xScale} label="Emotion" labelOffset={15} top={yMax} />
4</Group>
  • 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.

1{data.map((d, i) => {
2 const label = x(d);
3 const barWidth = xScale.bandwidth();
4 const barHeight = yMax - yScale(y(d));
5 const barX = xScale(label);
6 const barY = yMax - barHeight;
7
8 return (
9 <Bar
10 key={`bar-${label}`}
11 x={barX}
12 y={barY}
13 width={barWidth}
14 height={barHeight}
15 />
16 );
17})}
  • 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:

1import React from "react";
2import { Group } from "@vx/group";
3import { LinearGradient } from "@vx/gradient";
4import { scaleBand, scaleLinear } from "@vx/scale";
5import { AxisLeft, AxisBottom } from "@vx/axis";
6
7// accessors return the label and value of that data item
8const x = d => d.label;
9const y = d => d.value;
10
11function BarChart({data, width, height}) {
12
13// bounds
14const xMax = width - 80;
15const yMax = height - 80;
16
17// scales
18const xScale = scaleBand({
19 rangeRound: [0, xMax],
20 domain: data.map(x),
21 padding: 0.4
22});
23
24const yScale = scaleLinear({
25 rangeRound: [0, yMax],
26 domain: [Math.max(...data.map(y)), 0]
27});
28
29return (
30 <svg width={width} height={height}>
31 <LinearGradient
32 from={`#e9e9e9`}
33 to={`#fff`}
34 id={`gradientFill`}
35 />
36 <rect
37 width={width}
38 height={height}
39 fill={`url(#gradientFill)`}
40 rx={5}
41 />
42 <Group top={25} left={55}>
43 <AxisLeft left={10} scale={yScale} numTicks={4} label="Times" />
44 {data.map((d, i) => {
45 const label = x(d);
46 const barWidth = xScale.bandwidth();
47 const barHeight = yMax - yScale(y(d));
48 const barX = xScale(label);
49 const barY = yMax - barHeight;
50
51 return (
52 <Bar
53 key={`bar-${label}`}
54 x={barX}
55 y={barY}
56 width={barWidth}
57 height={barHeight}
58 />
59 );
60 })}
61 <AxisBottom scale={xScale} label="Emotion" labelOffset={15} top={yMax} />
62 </Group>
63 </svg>
64)}
65
66export default BarChart;

Bonus

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

1.vx-bar {
2 transition: height 150ms, y 150ms;
3}

This way, when the data changes it will move to the next height smoothly. You can see that in action below.

Discuss this article on Twitter