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 & style texts in the title, description & footnotes
  2. Format & style texts in tooltips
  3. Format texts in tables
  4. Insert links and images 
  5. Creating tabs & drop-downs to show multiple chart views

1. 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>

2. 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: 

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 in tooltips: 

<a> <abbr> <address> <b> <big> <blockquote> <br/> <br> <caption> <cite> <code> <col> <colgroup> <dd> <del> <details> <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> <sup> <table> <tbody> <td> <th> <thead> <tfoot> <tr> <tt> <u> <ul> <wbr><br>

3. 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. 

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

In Datawrapper, there isn't an out-of-the-box solution for creating tabs and dropdowns. 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.