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 then use offset to 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.35 seems to work: 

We don't recommend doing this. It looks fine at first glance, but it won't anymore once you change the size of your chart: 

On this tall chart, 10.25 is very far away from the 10. That means our annotations aligns to a y position that's far away from our 10th gridline. 

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 Position to move your text annotation, Datawrapper aligns the top of your text box to e.g. the 10.25. 

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 6px to the top to align it with the 10th gridline, so type -6: 

This way, you tell Datawrapper to still position the annotation at the 10th gridline and move it up 6 pixels.

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.