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 "Annotate" in step 3: Visualize, you'll find five panels. The first one is "Annotate your chart''


  Describe your chart:

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

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


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 mobile view so you can see how staggered or far apart different labelled data points are from each other.

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


Add custom text to plot

This panel enables 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, check "show tooltips". You can then click on the "edit tooltip template" to decide the content of your tooltips: 

Perhaps you already came across this feature from our Map tool. If not and you're curious to learn how to use the tooltip feature, visit this article: "How to create useful tooltips"


Add custom lines and areas (experimental)

In the last panel of "Annotate", 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. 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 also define points, consisting of an x value and a y value, e.g. "2000, 50". If you define two points, a line will go through, e.g. "2000, 50, 4000, 70". Three or more points will define areas.

As you can see, we can design these lines and areas. Here are all options that are available: 

@dashed Makes a dashed line
@dotted Makes a dotted line
@color:red / @color:#cc0000 Colors the line/area
@opacity:0.5 Makes the line/area more transparent (values between 0 and 1 are possible)
@stroke:red / @stroke:#cc0000 Creates and colors the stroke around an area
@width:2 Defines the width of the stroke around an area 


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


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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us