Introducing React Simple Pie Chart

When building out the first version of Brigade, we wanted a simple data visualization to show how people agree and disagree with positions. Although pie charts are typically not a great choice, for our simple use-case with only two data points they actually work pretty well —we don’t need a high degree of accuracy and they are approachable and quickly understood.

We decided to save some time by integrating a library to do the heavy lifting, and after evaluating our options we decided to try out Chart.js. It has a lot of things going for it — relatively simple, smallish library, clean charts that did what we wanted — so we plugged it in and were on our way. Or so we thought.

The simple pie chart in action on Brigade

Integrating Chart.js with React.js was, unfortunately, not as straightforward as we had hoped. It didn’t take too long to write a component that would render the pie chart; but because React likes to re-render things constantly, updating the pie chart when the props changed was a challenge. And, once we got that working, we ran into some interesting bugs on displays with higher pixel densities than 1 (e.g. newer smartphones and laptops). Moreover, it was difficult to justify the whole 52 KiB (minified) dependency for such a simple visualization.

So we decided to write a React component that renders our simple pie chart SVG. Most of the trigonometry was borrowed from this pie chart SVG tutorial, and in just 98 lines of commented code, we were able to achieve our goals perfectly.

If you are using React and want a dead-simple pie chart SVG, you should give ours a try.

npm install --save react-simple-pie-chart

Web infrastructure at @airbnb. Making web since the 90s. Co-created he/him Minnesotan, liberal, dad. Follow @lencioni on Twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store