SVG Pie Chart using React and D3

Combining D3’s modular API and React’s declarative interface for composing SVGs makes creating interactive charts easy as pie.

These examples assume familiarity with:

• ES2015 Syntax
• React & ES2015 Class Components

By the way, if you need to just ship something, there are quite a few great libraries for using D3 with React:

• react-d3
• Victory

Example 1: A Simple Pie Chart

Repeat after me: “Don’t touch the DOM when using React.” Basically, if you’ve used D3 before, you should forget the entire Selections API. Luckily D3 is incredibly modular. All the examples below are on Codepen, but if you’re using Browserify or Webpack here’s all you’ll need:

Our application will consist of three components, which we’ll use throughout the examples. Here’s a quick overview:

<App> Component

The App component mainly calculates the position and radius of the pie chart so that it fits neatly into the center of the window. This does not update with window resize events, but you could easily add something like react-dimensions in a real world scenario.

The initial App component

<Pie> Component

The Pie component has two jobs at this point:

1. Create a color scale for generating colors for each slice. This isn’t necessary if each slice has a predetermined fill color.
2. Create a pie layout generator. For each value in the data array, we call the pie generator function and render a Slice with the returned value.

The initial Pie comonent

<Slice> Component

Using the arc generator and the value generated by the Pie component, the Slice component renders the pie slice path.

The initial Slice component

Putting it all together

The key is to use D3’s shape layout and path generators to calculate the SVG element properties. React is responsible for building the DOM and SVG elements. Later, we’ll also use React for some basic interactivity. But first, let’s look at how we can add some labels to the pie chart.

Example 2: Adding Labels

Updating the <Pie> Component

To start, we’ll use the data property of the value object as the label. This will be the original number we passed into the App component. We’ll add support for the label property next.

Passing the label to the Slice component

Updating the <Slice> Component

The Slice component does the heavy lifting for adding labels. We’ll add a new <text> element that’s transformed into the correct position by using the arc.centroid function.

Adding a label using centroid

Example 3: Turn a Pie into a Donut

Updating the <App> Component

We’re going to add a few more arc properties from D3 to turn our pie into a donut. We’ve already setup the innerRadius property for the Pie and Slice components, so we’ll set it to a fraction of the outerRadius and call it done. The other properties, cornerRadius and pieAngle, will be handled by D3.

Setting up some properties for the pie chart

Updating the <Pie> Component

Here we simply pass the new pie chart properties to the Slice components.

Passing the props to the Slice component

Updating the <Slice> Component

The properties are now used in the arc generator methods. The rest of the component is unchanged.

Updating the arc generator to use the props

Example 4: Basic Interactivity

At this point, adding some interactivity is is pretty straightfoward. We’ll listen for onMouseOver and onMouseOut events, and toggle the state of isHovered. When the slice is hovered, we’ll expand the outerRadius.

Adding some interactivity

Now we have an interactive Pie chart. We’ve built a reusable component with support for labels, inner and outer radius, and basic hover effects. If you really want to make this pop, checkout react-motion. It will make it super simple to animate the hover effect.

Thanks for reading! If you enjoyed this, you may want to read some of our other posts from LocalMed Engineering:

Offline First: An Intro to Service Workers

LocalMed Toolbelt