All of segments begin at 3 o’clock, which is the default starting point for SVG circles. I created the chart as a Vue component for my project, but you could just as easily do this with vanilla JavaScript, HTML, and CSS. CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the The value we’ve set in the above example is “85 15”. This comment thread is closed. for local development. As we do this, we’ll also calculate the coordinates for the text labels. It can be beneficial when the trade-offs are known and properly evaluated. Now we need to add additional segments around the circle. If we think of this as a pie, then having an 85% segment means there would be 15% of the pie remaining. But, I found this method a lot more convoluted as well as not as reliable across browsers (I’m looking at you Safari). The first value defines the dash length; the second defines the gap length. We could adjust the stroke-dashoffset until we get lucky, but this wouldn’t work easily if we had more than two segments. Edit, August 25, 2016: Previously, I positioned the text inside the donut using the dominant-baseline property. Let’s create another computed property so that we can return a nice, formatted string. Digging deep into what I remember from high school math, I know that the radius based on the circumference is: r = C/(2π), or r = 100/(2π). Here’s the method to get our stroke-offsets: …which we bind to our circle in the HTML with: And voilà! stroke-dasharray defines an array of dashes and gaps used to paint the outline of a shape. There’s a with a class of “donut-hole.” This is what makes sure the center is white. Therefore, they are inaccessible to screen readers. Finally, in order for these sorted values to be available to Vue before the chart gets rendered, we’ll want to reference this computed property from the mounted() lifecycle hook. Let’s fill the chart with 40%, 30%, and 20% with 10% unused. The first layer of concern for accessibility should be to make this SVG chart more semantic by wrapping it with a

element since it’s a diagram. Again, a quick search turns up a formula: We now have enough information to calculate our x and y text coordinates: First, we calculate the angle of our segment by multiplying the ratio of our data value by 360; however, we actually want half of this because our text labels are in the middle of the segment rather than the end. For example: I’d love to hear what you think about this implementation and other experiences you’ve had with SVG charts. We already have most of this: we know our radius, we know how to calculate our segment angles, and we know our center offset values (cx and cy). This means that we need to place our elements with x and y coordinates at different points along the circle. Let’s start by setting up our structure. I also CSS and SVG charts are inherently more accessible and more semantic than other techniques. So, next we need to adjust the size of the segment to our desired percentage. I have edited this post to reflect a better, and far simpler cross-browser solution using only “translateY”. I’ve set the X and Y attributes to begin in the center of the SVG at the baseline and left-aligned. All that’s left is to make the text uppercase (easy to do) and position the individual text elements using “translateY” so that they stack properly. But, if you’re only using 2D transforms you can use the transform attribute on the elements themselves to position the text. Chris also has a good overview. We’re working in degrees, which means that we need to do some conversions. Depending on your font and font-size, you may want to adjust the positioning as well. Obviously, this isn’t exactly what we want. You may notice (if you’re familiar with creating charts for the web) that I haven’t included Chart.js in my recommended libraries above. We can fix this with the text-anchor presentation attribute. Instead, it actually starts on the right side (at 3:00), and it moves clockwise around the circle. After adding in a “translateY” of 0.25em, the text aligns a bit better vertically, but we’re not out of the weeds yet. You might suspect that this requires math. Hmm, it seems that if we have small percentages, the labels go outside of the segments. We need to make both text blocks smaller and align them in the center by adjusting the font-size to where we like it (0.6em for the larger-sized number and 0.2em for the label looks about right) and using the “text-anchor” property with a value of “middle.”. This makes it incredibly easy to provide additional context for screen readers through attributes and caption-like elements. Math applied to something like this is way more fun than it was in high school. Then, we need to adjust the font-size and line-height. We first need to total up our data values. This same formula works to add additional segments. Let’s fix this by creating segments. We can add a color key as part of the