Building a Donut Chart with Vue and SVG

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.

A Handmade SVG Bar Chart (featuring some SVG positioning gotchas)

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.


Making Charts with CSS

There are many ways to make visual representations of data: bar charts, line graphs, scatter diagrams, sparklines... not to mention the many ways in which you can implement them on the web. In this post I'll be looking at plain CSS methods for styling data. (more…)