Understanding How Our Chart Works

This is a relatively simple chart to create – the crux of it relies on using two <circle> elements to create the back and front circles seen in Figure 8-1. Our code starts with creating a typical SVG container of 340px by 333px, limited by a viewBox of the same size.

We then create a definition for our linear gradient, which is called (unsurprisingly!) gradient . This is set to a very dark cyan color and ends with a grayish tone of the same color. This gradient is then use in our front circle – both elements are set to a radius of 70, with the gradient effect applied using the .circle-front class. The demo is then topped off with a single <text> element that provides the 25% displayed within the two circles.

Now – there is a key point we should be aware of: the presence of the two transform statements. The first one, applied to the <g> tag, merely slides the circles into view – without it, the chart would appear off center, with most of it hidden. The second one is more critical: SVG charts of this type usually start at the three o’clock position, which isn’t so intuitive for the user. To correct this, we simply rotate the front circle anti-clockwise by 90 degrees, so it becomes more recognizable as a chart.

However, this isn’t where the real magic happens – that is in how we calculate how much of the gauge should be displayed. There is a little formula we can use for this purpose; let’s take a moment to explore this in detail.

Working Through the Formula

Unfortunately, with this type of chart (and others too), we have a little calculating to do – we’ve displayed both circles on screen, but how do we calculate how much of the front circle should show?

Now – question is: Where did the 100 come from? Well in this case, we will use 100% as our circumference; the calculation is unit agnostic, hence just using the value 100, and giving us a value of 628, or 628px (or 39.25rem, as shown in the demo).

The next part gets a little more complicated – we now need to work out how much of the darker-colored ring to display. To get the value, we can use this formula: C x (1 – 0.25), where 0.25 represents 25% or the one-quarter-filled value of our ring chart. When calculated, we get 471px (or 29.4375rem, as shown in the demo); this part is offset, leaving us with 157px (9.875rem) or 25% of our circumference.

As an aside, you may ask why we’re not using 70 as value for radius – after all, this is what is specified in the original markup, right? Well, there is a good reason for this – it simplifies the math involved, both for working out the circumference (which will always be 628px), and the values for stroke-dasharray and stroke-dashoffset: anything to make our lives easier! If you want to dive into the detail, Mark Caron has an extensive article on Medium, which explains the calculations; it’s available at https://medium.com/@heyoka/scratch-made-svg-donut-pie-charts-in-html5-2c587e935d72 .

Putting It into Practice

Armed with our newfound knowledge – let’s put this into practice: take a look at the CSS style sheet for the donut demo, starting with the style rule for .circle-back.

We have two values present – one is stroke-fill, which is self-explanatory (it fills our circle with a light gray color). The second, stroke-width, needs more explaining: this is the width of the border of our circle. Normally we would set this fairly thinly, but here’s the rub: when making the border thicker, it actually has the effect of drawing fully filled-in circles! Try adjusting the value using a browser’s console, and you’ll soon see what I mean…

Moving on, we have the .circle-front rule; this uses a slightly narrower stroke-width value, to give the effect of a border inside and outside of our grayish-color gradient effect. But – and here comes the tricky part: the use of stroke-dasharray . This property controls the pattern of dashes and gaps used on stroke paths; setting this at 629px effectively fills up our stroke completely. (If the value had been set low, to say 50px, then you will start to see the effects of this property.)

Now – remember the 471px value from earlier in this demo? Here, we use it to set the stroke-dashoffset value; this simply specifies how far in to start the dash pattern specified by stroke-dasharray.

But – there is a sting in this tale: the stroke-dashoffset value works anti-clockwise, whereas stroke-dasharray works clockwise, but starts on the right, at the 3 o’clock position. This can mean that if you were to produce a circle that had a dotted/dashed border effect, you might not get the effect you were expecting; to fix it, we can specify a value of 25 (or 25%) to reset the starting point of this effect to the top dead center of our circle. Note though – this 25% is not a negative number, as stroke-dashoffset works counter-clockwise, not clockwise.

Now that we’ve covered how to create our segment effect, let’s take a look at a similar type of chart – the typical pie chart. No, I’m not thinking of visiting the local bakery (although it’s a tempting prospect!), but a more in-depth chart with multiple segments. It uses similar properties to our completed donut chart, so let’s dive in and take a look in more detail.

Exploring the Code in Detail

So – how does our pie chart work? And what’s the connection to the viewBox values in our demo...?

Here, we set an initial radius (or r) value of 16 – this, along with the cx and cy values will remain constant throughout. Hold on a minute: doesn’t that mean we will have equal segments for our pie chart? Well, no – because we make use of a little trick at this point: let me introduce you to the stroke-dasharray property.

Put simply, the stroke-dasharray property is like a mask; it tells our SVG how much of our chart to show, and what proportion should be (effectively) hidden. Let’s work through a quick example, using the code we’ve just created in our previous demo.

In the code, the first item we’re counting is Cherries – let’s for argument’s sake say our total is 43. The stroke-dasharray property works on the basis that 43% of our chart will be visible. The 100 value is to ensure that we complete a full turn of the circle, even though it will be hidden, as shown in Figure 8-3.

Seems straightforward, right? Well, it might – if only for one thing: stroke-dasharray works anti-clockwise, but starts from the 3 o’clock position, not 12. So how come our chart looks like it’s doing the opposite? Easy – our SVG has a transform() statement in the style sheet, to rotate it anti-clockwise by 90 degrees.

Okay – hopefully you’re still with me, as things are about to get interesting! Our chart has three more segments to add, so how are these added in, without each segment ending up being misplaced and clashing with each other?

The segments are set in a similar fashion to the first one, inasmuch as we have radius, cx, cy, and stroke-dasharray values. However, we have the presence of an additional property: stroke-dashoffset. This merely leaves a gap before we start applying stroke-dasharray; this has the effect here of bumping the segment round to the first available space after the previous segment. Let me explain with a quick walk-through:

We don’t need stroke-dashoffset on the first segment, as it is assumed this will be zero by default. Clearly though, we need something to position segments two, three, and four, so we set values for each of these. Assuming we have set our stroke-dasharray values in the same way as before (they are 19, 14, and 25), we simply subtract the stroke-dasharray value from the previous stroke-dashoffset value . Take a look at segment two for example – we set the stroke-dashoffset value to -43; subtracting 19 from this value will give the stroke-dashoffset value for our third segment.

Now – some of you at this point may ask why we are specifying negative values: it’s a perfectly reasonable question. The answer is simple: because stroke-dashoffset works anti-clockwise by default, we want our segments to run clockwise. Turning the number negative simply reverses the direction of travel!

It’s worth pointing out that you may well see lots of other people try to specify complex formulae to create pie charts; in reality, this isn’t necessary, as long as you can keep some of your initial sizes such as radius and viewBox as whole integers, and that you use percentage values where possible. It’s not obligatory, but I’m a great believer in the KISS principle: after all, why make life complicated when you don’t need to?

Okay – let’s move on: our next example chart puts us on the straight and narrow (so to speak). It’s time to take a look at the typical bar chart and see how we might implement it using SVG in more detail.

Understanding Our Code

Take a look at that code – we can see it comes in three parts: the first takes care of the x-axis, the second the y-axis, and the third covers the bars in our chart.

You will notice that we use the <g> or group element to separate each block, or in some cases, sub-block – our first block takes care of drawing the x-axis, using the command <path d="M0,6V0H300V6"></path>, toward the bottom of this first block.

Here, we simply draw a single line from point 6 up to point zero – this is repeated multiple times in this first block, using the transform() command to leave a gap between each tick line.

Notice something about each tick line? We only have one set of coordinates, so what gives? The reason for this is that the starting x1 and y1 are assumed to be 0,0 by default, so there is no need to include them explicitly.

There is a simple trick we’ve used here to ensure the ticks are evenly spaced – the first one is positioned at (30.5,0), using the translate command. To arrive at this, we simply take half of the width of each bar (20.5), and add 10, to allow for the space between the y-axis and the edge of the bar. The subsequent ticks are spaced at 44-pixel gaps – this is the width of the bar, plus 3 to allow for a little gap between each bar.

Moving on, the second block performs a similar task – we use the <path> element at the bottom of this block to draw the y-axis. Each of the tick lines are drawn using the same principle as we did for the x-axis (not forgetting the default 0,0 value for each starting point). We use a <text> element this time to add in the percentage values – each text element is positioned using the dy, x, and y properties.

We then round out our demo with the third and final block – this takes care of each bar shown in our demo. There is nothing complicated here; we set the x and y values to locate each bar, then set height and width properties to control the size of each bar. In each case, the width is set to 41px wide; the height is merely the sample value that would have come from our poll. Each bar is complemented by a <text> element to display the name of each technology in question; each is rotated 90 degrees anti-clockwise to align them with the top left point of each bar.

Okay – let’s move on: there is one more chart type we should cover: line charts! This uses the same principles to create our axes that we used back when we created our bar chart example; this time though, we make use of the <path> statement to join the points of our line chart. Let’s take a look in more detail at how this works in practice.

Dissecting Our Code

In our demo, we’ve created a typical line chart – we’ve specified a number of points, which we connect using a filled-in block to simulate a line that we might otherwise have used. A look at the code might give the impression that it is a complex setup – in reality, it’s not difficult, as long as we break it down block by block.

The first block takes care of the x- and y-axes of our chart – here, we’ve created a number of vertical and horizontal lines using <line> elements in two separate groups, which have been evenly spaced out in our chart. These are then inserted onto the page using <use> elements – this would allow us to reuse these elements elsewhere on the page, although we’re only using them once in our demo.

Next up we added a <path> element – this looks after the block that represents our values on the page; we could have used a line, but turning it into a block gives it a little more interest. Over the top of this block, and at specified points, we then add miniature circles – these represent the data values we are using in our chart. To finish off our demo, we then added x- and y- labels using <text> elements; the last element is then rotated anti-clockwise to position it nearer the y-axis of our chart.

Okay – let’s change tack: we’ve covered the popular bar, line and pie charts; what’s left? Well, there is one: if you want something to help spark some dynamism to an online report, then it’s time to take a look at sparklines…and yes, pun most definitely intended!

Breaking Apart Our Code

If you’re tasked with creating a sparkline chart (and let’s assume for the purpose of this book that it is a line chart), then we can use exactly the same principles as if you were creating one of its larger cousins.

At first glance, it may not be easy to spot, but we’re actually using a series of Bezier curves, instead of straight lines. This gives a better effect for a sparkline – its normal size (i.e., really small), means that displaying numbers would be impossible, so we can go for the effect of a line graph instead.

The beauty though is that if we are using sparklines, then we can animate them to a larger size when hovering over them, using nothing more than standard CSS.

For an example of how you might animate a bar chart sparkline, head over to the pen created by the CSS Tricks website, at https://codepen.io/team/css-tricks/pen/1f82250d67c9f9d15b7339543c28cb20 . It’s a larger version, but the same principles still apply!

Okay – we’ve covered all of the common chart types; let’s move on and explore something completely different. Charts are a great way to convey information, but no matter how we skin them, they can still be somewhat static.

Thankfully there are ways to take our charts to the next level – making them interactive has almost become an essential part of designing any chart for display online! For example, we could just animate a segment from a pie chart – it might fly out a little, or scale up and show more information, as if viewed under a magnifying glass. Over the course of the next few pages, we’re going to explore a couple of simple techniques to get us started – there is so much more we can do, but we must begin somewhere!