How to add charts to tooltips

You can add charts to tooltips in Datawrapper  choropleth maps, symbol maps, and scatterplots. This is not something we officially support, so it's not as easy as e.g. adding text to tooltips. But here we show three ways to add charts to tooltips anyways: With HTML and with images.

👉 To learn how to create tooltips, visit our article "How to create tooltips".
👉 To learn how to customize tooltips, visit the article "How to customize tooltips".

1. Add charts with HTML

The charts in your tooltips will  load the fastest when you add them with simple HTML. Here's a map in which we do that. Hover over the regions to see the charts in the tooltips:

To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), the second one contains the bars. In this second column, we then add HTML <div> tags and define the width of these boxes with our numerical columns.

Here's the entire content from our tooltips:

<table>
  <tr>
    <td>Women</td>
    <td><div style="width:{{ 1.3*women }}px; height:15px; background-color:#BFA817; color:white; padding:4px 4px 0px 4px; vertical-align:bottom; font-weight:bold; display:inline-block;"></div><div style="width:{{ 130-(1.3*women) }}px; height:15px; background-color:#F2F2F2; color:#a69214; vertical-align:bottom; padding:4px 4px 0px 4px; font-weight:bold; display:inline-block;">{{ women }}% </div></td>
  </tr>
  <tr>
    <td>Men</td>
    <td><div style="width:{{ 1.3*men }}px; height:15px; background-color:#7AAFCB; color:white; vertical-align:bottom; padding:4px 4px 0px 4px; font-weight:bold; display:inline-block;"></div><div style="width:{{ 130-(1.3*men) }}px; height:15px; background-color:#F2F2F2; color:#6793ab; vertical-align:bottom; padding:4px 4px 0px 4px; font-weight:bold; display:inline-block;">{{ men }}% </div></td>
  </tr></b>
</table>


That's a difference of <strong>{{ difference }}</strong>%-points.

Let's have a closer look at the content of the <div>'s: 

In each cell of the second column, we define two of these <div>'s. The first one creates our colored bar, the second one creates the grey background bar. 

The first <div> in each cell is empty and has a width according to the data of our columns {{ women }} or {{ men }}.

The second <div> displays the data of {{ women }} or {{ men }} as text.

The CSS rules in each <div> are very similar. Here are the ones we use: 

CSS rule description
width:{{ 1.3*men }}px 
The width of the colored bar: We take the number from the {{ men }} column, then multiply it with 1.3 to make it fit the tooltip width nicely. Note that the 1.3 needs to be adjusted depending on your data. If you have high numbers, you'll need to work with smaller values like 0.1. If you have low numbers, you might need to multiply your values with 10 or 100.
width:{{ 130-(1.3*men) }}px
The width of the background bar: It's 100 (%) times 1.3, minus the width of the colored bar. 
height:15px
The height of each bar.
background-color:#7AAFCB
The color of each bar. 
color:white
The color of the text in each bar. Make sure that it's a bit darker than the corresponding bar color, to make it more readable.
vertical-align:bottom
Ensures that your bars are aligned nicely. Not necessary if each or none of your bar contains text.
padding:4px 4px 0px 4px
Defines the padding between text and bar edges. 
font-weight:bold
Makes the text bold.
display:inline-block
Ensures that your bars are placed next to each other, not below each other.

Try to experiment with these settings. You can use them to not just create bar charts with two bars, but multiple bars – or even column charts or scatterplots. 

2. Add charts as images

You can add images (PNGs) to your tooltips:

To do so, you'll need to create visualizations for each of your rows in the data set (e.g. for each country in a choropleth map, or for each dot in a scatterplot). Rather than doing this by hand, you can use the Datawrapper API

Then, copy the IDs of your charts, maps or tables to a new column, like so:

(You will find the Datawrapper ID in your chart URL: For https://app.datawrapper.de/map/DQiyw/visualize, "DQiyw" is the Datawrapper ID.)

Make sure that all your visualizations have a similar size (at least the same width). They also need to be small: Big visualizations like 700px x 600px visualizations will be cut off in the tooltips. Smaller sizes like 200px x 240px will work.

Now you need your visualizations as images (PNGs). 

To create them, you can download them directly in step 4: Publish and then upload them somewhere (e.g. to imgur.com). If you have lots of images and are on a Custom or Enterprise plan, you can also use our automatic Image Publishing. Learn more about it here.

Here we explain the second option via Image Publishing. 

In your  team settings, go to Images and select Add static file format. Now define your PNG size. It should be fairly small, so we called it "tiny" and gave it the size 200px x 240px:

Now every time you publish a visualization, a new PNG called "tiny.png" will be generated. You can find it here: http://img.datawrapper.de/eoqG9/tiny.png Make sure to replace the "eoqG9" will your Datawrapper ID.

We can simply add the links to these images in the tooltip like so: 

<img src="http://img.datawrapper.de/{{ Datawrapper_ID }}/tiny.png" width="200px">

Now your Datawrapper visualizations will be displayed once you hover over your regions or scatterplot dots.

Make sure to test your maps or chart on mobile phones: The tooltip visualizations might be too big for small devices to display nicely. 

And that's it! We hope this tutorial helped you to embed charts, maps, or tables in your tooltips. If you have any questions about this, let us know at support@datawrapper.de. We're looking forward to hearing from you.