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:

Contents

1. Describe your chart
2. Add labels
3. Add text annotations
4. Add range highlights and reference lines
5. Customize your tooltips
6. Add custom lines and areas (experimental)
7. Layout & Publish

Describe your chart

In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these Annotate options here.

Add labels

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.

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

Add text annotations

You can add annotations to your scatter plot by clicking on Add text annotation. You can then style and move the text, add an arrow and circle to it, and adjust how it will appear on mobile. Here's an in-depth explanation of all the options.

Add range highlights and reference lines

You can add range or line highlights to you chart by clicking on Add range highlight and then dragging on the chart where you want the highlight to be. You can then change its position, color, opacity, and line width and style, or delete it again. Here's an in-depth explanation of all the options.

Customize your tooltips

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.

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, writing "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 create reference lines like those a lot simpler with the Highlight range feature above. But to point out certain areas on your scatter plot, this feature at the bottom can be really useful. You can learn how to style your custom areas in our Academy article How to add custom lines and areas in scatterplots.

Layout & Publish

In the Layout tab, you can select an output locale, change the design theme and footer options, and enable social sharing. Find a detailed explanation of all the Layout options here.

In the final step 4: Publish & Embed, you have the option to publish the chart either by sharing the URL or by copying the embed code directly on your website or CMS (recommended). You can also download your chart as a PNG (available to all users regardless of the type of subscription plan they have) or as an SVG or PDF (available only to users of Custom and Enterprise plan). For more information on the different pricing plans, click here.