How to insert links in charts, maps & tables

You're halfway through creating a Datawrapper chart or a map and want to add hyperlinks (such as a link to a website or a downloadable file somewhere online). Not sure how to go about it? Here we explain how you can add links.

You can add links to the title, description, notes, tooltips, axis descriptions, labels (in most chart types) and to the source. You can't add links to bylines.

Here is a chart with links in different locations. You can hover over the chart and click on "Edit this chart" in its top right to learn how we created these links, but we also explain below how to create them.

Let's learn how to add links to your source, to your title, description or notes, to variables, to tooltips and to tables.

1. Adding a link to your source

We want to encourage you to link to your chart source, so we made it extra easy for you to do so. Head to step 3: Visualize → Annotate, fill the text field Data source and then add a Link to data source:

And that's it. Your chart should now have a clickable source in its bottom left corner:'

2. Adding links to your title, description or notes

To add an URL to your title, description or notes in step 3: Visualize → Annotate, you will need to use an HTML tag. You can add these link tags to any text field in step 3: Visualize → Annotate to the title, description and notes text fields:This is how your link should look like:

<a href="https://www.your-link.com">Yay, this is a link!</a>

What does this all mean? Let's look at it in detail:

<a ...>Yay, this is a link!</a> tells Datawrapper that this is a link and that everything between <a ...> and </a> should be interpreted as a link text.
href="https://www.your-link.com": "href" stands for "Hypertext reference". Your link goes between the quotes – make sure to copy the URL including the http://www part instead of starting directly with "your-link.com".

For those wondering:
Datawrapper will automatically attach attributes target="_blank" rel="nofollow noopener noreferrer" to the url for the following reasons:

👉 target="_blank" : This allows the url to be opened in a new browser window.
👉 rel="nofollow noopener noreferrer" : This does two things: It prevents the linked site to do malicious stuff in your browser. And it prevents browsers to send the website address you're coming from to your linked site. Add these two attributes to be super safe – but don't sweat if you forget them.

There is no need for you to add them yourself!

After adding your links, you can test them in step 4: Publish & Embed.

3. Adding links to labels and axis descriptions

You can even create links in labels (e.g. in bar charts, column charts, etc.), like so:

To do so, you'll need to head to step 2: Check & Describe. There you can look for the label you want to add a link to. Double click on it, then add an HTML link as you've just learned, and click Enter once you're done.

Again, this is how your link should look like:

<a href="https://www.your-link.com">Yay, this is a link!</a>

Notice that the label field in step 2 looks like the link text is missing (in this case, "Crisis"). Don't worry about that – the label including the link text will appear once you go to step 2.

You can do the same trick (go to step 2, add your link there) if you want to add links to axis descriptions, like so:

In both cases, you'll need to head to step 4: Publish & Embed if you want to test your links, since they won't work in step 3.

4. Adding links to tooltips

If you want to add links to tooltips (e.g. in scatterplots, choropleth maps or symbol maps), simply add your HTML tag in the popup that opens when you click Customize tooltips or on edit tooltip template in step 3 ''Visualize''→ Annotate.

Again, this is how your link should look like:

<a href="https://www.your-link.com">Yay, this is a link!</a>

If you want to add a different link to every tooltip, you can create a column with all the urls and call it something like "links". Then use a placeholder, in this case, {{ links }} in the tooltip which will allow you to link different url on each tooltip.

<a href="{{ links }}">Yay, this is a link!</a>

To make sure people can click on the links in your tooltips, enable clicking on symbols makes tooltips stick. Now your readers can click on a tooltip to make it appear even when they hover off a data point. Your readers need to click at another point in the chart or map to "unstick" it. Consider mentioning this behavior in your chart description or notes!

To learn more about how to create tooltips, visit our Academy article "How to create & customize tooltips".

5. Adding links to tables

When creating tables, you can turn on the option Parse markdown in the Refine tab in step 3: Visualize.

Markdown is a markup language that makes it easier than HTML to format your text.

That means, instead of writing <a href="https://www.your-link.com">Yay, this is a link!</a>, you can simply write [Yay, this is a link!](https://www.your-link.com), click Parse markdown and your link will appear in your table:

To learn more about how to use Markdown in our tables, visit the Academy article "How to format your text with Markdown".