How to create a custom color key

This article explains how to create a custom color key in any chart, map or table type with HTML. To learn how to create a custom color key in Choropleth maps without code, visit this article.

In Datawrapper, you can use HTML to add a custom color key to any chart, your tables or your maps. Here we explain three options, but you can style them as you like.

Color key with rectangles

The first option is to create a thick border-right with a HTML <b> tag. Repeat the following line with the right values and colors in your Description field in the Annotate step:

<b style="border-right:18px solid #40B1C3;"></b>50 to 99<br>

&nbsp; is a whitespace character to create some distance to the next element in the color key. 

Use the <br> HTML line break tag to create a line break before your color key:

Color key with circles

Another option is to use Unicode symbols like this circle ⬤ and color it according to your data.

<b style="color:#40B1C3; vertical-align:text-top;">⬤</b>50 to 99

Color key as text background

In this guest post on our blog, Christoph Wolf from German news outlet n-tv explains how they used HTML color keys in tables with a background color for text:

<b style="background:#0b7432; color:white; padding:1px 4px">Grüne/EFA<b><br>
<b style="background:#c31618; color:white; padding:1px 4px">S&D<b><br>
<b style="background:#0099ff; color:white; padding:1px 4px">Renew Europe<b><br>
<b style="background:#2c4b8e; color:white; padding:1px 4px">EVP<b><br>