How to use HTML & CSS in Datawrapper

Familiarity with simple HTML tags and knowing where & how to use them in Datawrapper can go a long way. In this article, you'll learn which HTML can be used and where/how to use them in Datawrapper. 

Note: Not all HTML tags are interpreted by Datawrapper. See the lists in each section to learn about the available HTML tags. 

Index

  1. Format texts in labels
  2. Format & style texts in the title, description & footnotes
  3. Format & style texts in tooltips
  4. Format texts in tables
  5. Insert links and images 
  6. Creating tabs & drop-downs to show multiple chart views

1. Format texts in labels

You can make text bold or italic in chart labels by using <b></b> and <i></i>, like so: <b>Iceland</b> will turn Iceland bold, and <i>Iceland</i> will turn it Italic:

2. Format & style texts in the title, description & footnotes

Sometimes, adding some styling to the title or the description of your visualization can make it more readable and memorable.

Read How to turn your title into a color key to link the title directly to the chart content:

or How to create a custom color key for some ideas on how to add CSS styling in your description and notes: 

These are the available HTML tags for your titles, descriptions & notes:  

<a> <span> <b> <br> <br> <i> <strong> <sup> <sub> <strike> <u> <em> <tt> <summary> <details>

3. Format & style texts in tooltips 

You can format text inside your tooltips using HTML tags. Read the article: How to customize tooltips to learn how to use HTML to emphasize your texts inside the tooltips.

The tooltip formatting here only refers to tooltips used in  symbol maps, choropleth maps , and scatter plots. 
👉 To learn how to customize tooltips in locator maps, visit the article How to create tooltips in locator maps. 

You can also combine HTML and CSS to add charts to tooltips and insert images which you can read about in How to add charts to tooltips: 

These are the available HTML tags inside tooltips in  

  • symbol maps, choropleth maps, and scatter plots: 
<a> <abbr> <address> <b> <big> <blockquote> <br/> <br> <caption> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <div> <dl> <dt> <em> <figure> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <hgroup> <i> <img> <ins> <kbd> <li> <mark> <meter> <ol> <p> <pre> <q> <s> <small> <span> <strike> <strong> <sub> <summary> <details> <sup> <table> <tbody> <td> <th> <thead> <tfoot> <tr> <tt> <u> <ul> <wbr> <br>
  •  locator maps: 
<a> <span> <b> <br> <i> <strong> <sup> <sub> <strike> <u> <em> <tt> <img> <table> <thead> <tbody> <tfoot> <caption> <colgroup> <col> <tr> <td> <th>

4. Format texts in tables 

In tables, you can format texts such as making it bolder with a <b> tag or add a line break with a <br> tag. You can insert hyperlinks using <a> tag which is also very useful. These should be added in your original dataset (e.g. in a spreadsheet) before you upload it to Datawrapper. However, instead of using HTML tags, it's often simpler to format your text, add links or images in tables with Markdown. We explain how to do so in How to format your text with Markdown. 

Another trick is using inline CSS in these HTML tags to hide column headers you don't want to show (e.g. <b style="visibility: hidden;">text</b>). 

To insert an image in tables, <img> tag is not supported therefore use markdown instead. 

These are the available HTML tags that you can use in tables:  

<a> <span> <b> <br> <br> <i> <strong> <sup> <sub> <strike> <u> <em> <tt>

Insert images in the title, description, footnotes, and tooltips using <img> tag. You can also customize the image-size and style using inline CSS too. Read How to insert images almost anywhere and How to insert links in charts, maps & tables for the details. 

6. Creating tabs & drop-downs to show multiple chart views

In Datawrapper, there isn't an out-of-the-box solution for creating tabs and drop downs. However, with a little HTML & CSS workaround, you can create buttons and tabs in the description. Head over to our article How to add tabs and drop-downs to your visualizations to learn how.