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. Note: We changed the tooltips code in May 2022. For the old version of the code, click on 'Old version' below. 

Here's the content of the tooltip:  

<div>
    <div style="margin-bottom:11px;">
        <div style='margin-bottom:4px;'>Women</div>
        <div style='background:#F2F2F2; width: 150px; height:15px; display:flex; align-items: center;'>
            <div style='display:flex; align-items:center; background:#BFA817; height:100%; width: {{women}}%'>
                {{ women >= 20 ? CONCAT("<span style='color:white; font-weight:bold;margin:0px 5px;'>", FORMAT(women, '0'), "%</span>") : "" }}
            </div>
            	{{ women < 20 ? CONCAT("<span style='color:black; font-weight:bold;margin:0px 5px;'>", FORMAT(women, '0'), "%</span>") : "" }}
        </div>
    </div>
    <div>
        <div style='margin-bottom:4px;'>Men</div>
        <div style='background:#F2F2F2; width: 150px; height:15px; display:flex; align-items: center;'>
            <div style='display:flex; align-items:center; background:#7AAFCB; height:100%; width: {{ men }}%'>
                {{ men >= 20 ? CONCAT("<span style='color:white; font-weight:bold;margin:0px 5px;'>", FORMAT(men, '0'), "%</span>") : "" }}
            </div>
            	{{ men < 20 ? CONCAT("<span style='color:black; font-weight:bold;margin:0px 5px;'>", FORMAT(men, '0'), "%</span>") : "" }}
        </div>
    </div>
</div><br>

Bar charts can be drawn as simple rectangles with HTML <div> and background colors. The first half displays the data for women and the second half for men. Let's take a closer look at the first half of the tooltip which corresponds to the data for women. 

First, there is a <div> that contains the label of the bar:  

 <div style='margin-bottom:4px;'>Women</div>

This following <div> creates the grey bar background:  

<div style='background:#F2F2F2; width: 150px; height:15px; display:flex; align-items: center;'> ... </div>

Then, the next <div> defines the width of the bars according to the numbers {{women}}% and fills it with the background color #BFA817. Then, if the bar is wide enough to display the labels, value labels are displayed inside the rectangle and shown in white against the bar. See this page to learn how to use expressions like CONCAT and FORMAT and if-else statements.  

<div style='display:flex; align-items:center; background:#BFA817; height:100%; width: {{women}}%'>
	{{ women >= 20 ? CONCAT("<span style='color:white; font-weight:bold;margin:0px 5px;'>", FORMAT(women, '0'), "%</span>") : "" }}
</div><br>

If the bar is not wide enough, a value label is displayed outside of the bar and in black against the gray bar background:  

{{ women < 20 ? CONCAT("<span style='color:black; font-weight:bold;margin:0px 5px;'>", FORMAT(women, '0'), "%</span>") : "" }}

This is repeated for drawing bars for data for men. 

⚠️ We changed the tooltips code in May 2022. For the old version of the code, click on 'Old version' below: 

Old version New version
Click here to see the old version 

To achieve this, we first add a table within the tooltip. The first column contains the categories ("women", "men"), and 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 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 by 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 bars contains any 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.