Simple Pie Chart in React


Oh boy, it’s been over a year since I last posted. Too much learning, and trying to keep my head above water with all that’s new in the javascript eco-system.

Anyway here is a very simple pie chart as a react component using SVG. If you don’t want to install a huge JS library just to get a simple pie chart, maybe just copy and paste this code.

It is based heavily on David Gilbertson wonderfully written A simple pie chart in SVG.

You use it as you would any other react component. There are two properties you pass in: its size (ie. radius) and an object which contains an array of the slices, which describe the percent and color.

Here is the code (note: in JSX and ES6):

Posted in Uncategorized | Tagged , , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">