I recently needed to make a donut chart for a reporting dashboard at work. I wanted it to dynamically calculate its segments based on an arbitrary set of values, have labels, scale well across all screen sizes and devices be accessible, and cross-browser compatible, among other things. This article details the steps I took to do that, using Vue.js.
Let's take a look at some things I learned about positioning elements within SVG that I discovered whilst making a (seemingly) simple bar chart earlier this week.
You don't have much choice but to position things in SVG. SVG is a declarative graphics format, and what are graphics but positioned drawing instructions? There are plenty of gotchas and potentially frustrating situations though, so let's get down to it.