How to turn your title into a color key

Sometimes you can make a chart a lot more simple & readable by integrating the color key directly into the title or description, like the one below:

In Datawrapper, this can be achieved with some simple HTML style commands. Note that we can style any text we want to do with this approach. The text we color doesn't need to be the variable name.

Scroll down to see an overview of style commands for your chart. What follows is a detailed explanation:

How styling your title & description works

Giving the text a color

For the chart above, this is our chart title without style commands:

Starting in 2019, the number of Germans older than 60 will surpass those younger than 30

To color the text like in the chart above, we write:

Starting in 2019, the number of <b style="color:#A08E00;">Germans older than 60</b> will surpass those <b style="color:#04607C;">younger than 30</b>

So how does it work? Writing  tells browsers that it should show the following text in bold, until it meets a . Our entire title text is in bold already, so we don't see any bolder text. But try e.g. for italic text, to see an effect.

We can now style this bold text between  and . To do so, we give our bold text a style. And then we define the style – in our case, we give the text a color.

So text that's between  and  will be colored in a certain color. You can replace the color hex code #04607C with your own hex code or simple color names like "red".

Adding background color to the text

Sometimes, the colors in our charts are too bright to use them as text colors on a white chart background. Good thing that instead of giving our text a color, we can also fill the text background with a certain color. This will result in the following effect:

This the title we put in Datawrapper to achieve this:

<b style="background:#FFC13E; padding:1px 4px">Asia</b> loses population share, <b style="background:#30738e; color:white; padding:1px 4px">Africa</b> gains

As you can see, instead of defining a color (which would be the text color), we now define a background. We will also define padding: This is just for aesthetic reasons, to give the background color some air to breathe. You can play around with the numbers yourself to see what you prefer.

For Africa, we define both, a text color and a background. That's because the background color is too dark to still use black as a text color. We define a white text color instead.

Underline color

When using more than two different colors, our chart title can quickly become too colorful & playful for the topic we might cover. Often, underlining the text with the variable color helps:

Note that colors are harder to distinguish the less area they cover: Orange and a lighter shade of orange are easier to distinguish when they fill the background of a whole word than just an underline. When using colored underlines, use colors that differ a lot in brightness or hue.

Here's the title we use for the chart above:

<b style="border-bottom: 3px solid #E48F00">Europe</b> and <b style="border-bottom: 3px solid #FFCB6F">Asia</b> lose population share, <b style="border-bottom: 3px solid #15607a;">Africa</b> gains

Instead of defining a text color or a background, we give everything between and a border-bottom. We can decide the thickness of this border (3px in our case), its style (solid, dashed, dotted or double) and its color.

After covering the three most important styles, here's an overview of them and some extra styles:

Collection of color highlights

<b style="color: #E48F00;">Europe</b> loses, <b style="color: #15607a;">Africa</b> gains population share

<b style="background:#E48F00; color:white; padding:1px 6px">Europe</b> loses, <b style="background:#15607a; color:white; padding:1px 6px">Africa</b> gains population share

<b style="border-bottom: 3px solid #E48F00;">Europe</b> loses, <b style="border-bottom: 3px solid #15607a;">Africa</b> gains population share

<b style="border-bottom: 3px dotted #E48F00; padding:0px 3px;">Europe</b> loses, <b style="border-bottom: 3px dotted #15607a; padding:0px 3px;">Africa</b> gains population share

<b style="border-bottom: 4px solid #E48F00; background: #FFD992; padding: 0px 5px;">Europe</b> loses, <b style="border-bottom: 4px solid #15607a; background: #B6E7F8; padding: 0px 5px;">Africa</b> gains population share

<b style="border-left: 10px solid #E48F00; background: #ffc25b; padding: 0px 5px;">Europe</b> loses, <b style="border-left: 10px solid #15607a; background: #B6E7F8; padding: 0px 5px;">Africa</b> gains population share<br>

<b style="color: #E48F00;">● </b> Europe loses, <b style="color: #15607a;">● </b> Africa gains population share<br>