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:

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.

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

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

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

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

Layout

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.

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.