Customizing your scatter plot: Annotate

This tutorial describes how to customize a scatter plot in Datawrapper. Head over to  the "Annotate" tab in step 3: Visualize. We assume that you have already uploaded your dataset into Datawrapper and refined your scatterplot. In this tutorial, we annotate our chart, label it, add tooltips, and talk about how to add custom text and custom lines and areas to this chart:

If you go to the Annotate tab in step 3: Visualize, you'll find five sections. Let's go through them step by step:

1

Describe your chart:

If you've created a Datawrapper chart or map before, you are already familiar with what the settings here. Here you can give your chart a title, a description, add notes and a source:

  • Title: We recommend using the title to inform your readers about the most interesting or important aspect of this chart – the one key statement that you want your reader to remember, e.g. "Unemployment highest in the south"
  • Description: The description should have as much information about the data as possible: What do we see exactly? E.g. "Unemployment rates in % in all US states, 2016"
  • Notes: Think of notes as footnotes, where we want to clarify any abnormalities about your data. E.g. "California unemployment rates from Jan and Feb 2016 not included in the calculation."
  • Source: The source name will give our readers the information about how trustworthy our data is. Does it come from a government institution or another trustworthy organization? The source URL lets our readers dig deeper and have a look at the underlying data. Both source name and source URL should be filled out on every map or chart to increase transparency. E.g. US Bureau of Labour Statistics, August 2017
  • Byline: Feel free to let the world know that you/your organization created that chart.
2

Labeling

In this panel, you can decide if your columns should be labeled, and if so, with which column. In the most cases, it makes sense to use the first column in your data set for that. In our case, that's the "Country" column.

You can now decide how your labels should appear. Do you want Datawrapper to label your data points automatically? Then labels will automatically appear if there's space for them (we make sure that they don't overlap each other). In the mobile view, fewer labels will appear than the desktop view. 

You can also select labels that should always appear in your chart, in the dropdown menu or directly in the chart. If you want to delete these added labels, just click on them. 

👉 Consider adding custom labels in the mobile view so you can see how staggered or far apart different labeled data points are from each other.

To recognize easily which label correspond to which data point, you can "highlight labeled symbols". 

2

Text annotations

These options enable you to add annotations to your chart. 

Our annotation tool is powerful and therefore deserves its own article. If you're curious about this tool, check it out:  "How to create text annotations". 
4

Customize tooltip

Our scatter plots are interactive: If readers hover over a data dot, more information can appear in a tooltip. In this panel, we can decide which information will appear:

First, you need to decide if you want to enable this feature and want your readers to see tooltips. If that's the case, keep  Show tooltips selected. You can then click on the customize tooltips to decide the content of your tooltips.

To learn how to use our tooltip feature, visit our Academy article:  "How to create tooltips".
5

Add custom lines and areas (experimental)

At the bottom of the Annotate tab, we can add extra lines and areas to our scatterplots. That's helpful if we want to add a rectangle around/behind certain data dots, or if we want to show a threshold line. 

For example, w riting "y=50" will create a horizontal line at the vertical axis point "50 years" (the same works for the horizontal axis, e.g. "x=2000"):

You can learn how to style these custom lines and areas in our Academy article "How to add custom lines and areas in scatterplots"
6

Design

In this last step, you can select a preset layout and enable social sharing function to circulate your work. 

  • Users of the Free plan can choose from two layouts; one layout with and one without the "Get the data" link.
  • Users of Datawrapper Custom and Enterprise plan have the freedom to choose from the default layout as well as the custom layout
7

Publish

Congratulations you are almost finished! In this last step, you can publish your work and decide how to share it with the world. The best way to use a Datawrapper chart is by embedding it directly on your website. To do that, click the big blue button that says "Publish Chart". Then, copy & paste the embed code snippet into your website or CMS. You can also download your chart as a PNG (available to all users regardless of the type of subscription plan they have) or a PDF (available only to users of Custom or Enterprise plan). For more information on the different pricing plans, click here.