How to align annotations to a chart grid
Sometimes you want to align a text annotation very precisely, e.g. to create an axis label. To do so, you'll need a good understanding of the difference between positioning and offset. This article explains this difference and helps you to align annotations to a grid correctly.
Let's take the following chart as an example:
Here we placed the axis label "sold cigarettes per day" as a text annotation. No matter if your reader sees your chart on a mobile or desktop device, it will always align nicely with the "10" axis tick.
To create such an annotation, you need to set the positioning to 10 and to then use offset move the label to the desired position. Let's see how this works – and why.
How to use offset to fine-tune the placement
First, you'll try to simply type in a "10" as your y-position for the text annotation (note that we set the anchor to the top left):
But that doesn't look right. That's because Datawrapper aligns the top of the text box to the 10th grid line, not the bottom of the first text line.
Your first impulse now might be to change the y position of the annotation to move the label exactly to the right position. In our case, 10.4 looks ok:
We don't recommend to do this. It looks fine at first glance, but it won't anymore once you change the size of your chart:
The size of your chart never changes as extremely as we show here, but it does change a bit depending on if your reader sees the chart on a mobile or desktop device. If you use the positioning to move your text annotation, Datawrapper still aligns the top of your text box to e.g. the 10.4.
On the short chart on the left, 10 is very close to 10.4, so there's almost no difference visible between the two positions. On the tall chart on the right, 10.4 is very far away from the 10. That means our annotations aligns to a y position that's far away from our 10th gridline.
A better approach is to use offset. To do so, start again by typing in the actual y position you want your text annotation to align to:
Now change the offset to move the annotation exactly where you want it to be. You want to move it 10px to the top to align it with the 10th gridline, so type -10:
This way, you tell Datawrapper to still position the annotation at the 10th gridline and move it up 10 pixels. Don't forget you can select "fill background", so that grid lines don't get in your way:
With the y position "10" and the offset, you annotation now "sticks" to the 10th gridline no matter which chart height:
To sum up: Don't use the position to move precisely align annotations. Use the position to anchor your annotation where you need it, then use offset to fine-tune the placement.
Annotations that combine different styles
With this knowledge, you can now create annotations that are differently formatted – for example, when you want to combine an annotation with bold, big type with a second, smaller annotation.
To do so, place this second annotation at exactly the same position as the first one, then use only offset to move the annotation below the first one:
In this case, "Germany" is positioned at 3.9 – and so is the smaller second annotation "7.6 cigarettes in 1976". We moved the second annotation 18px down only with the offset setting.