Show Sidebar Hide Sidebar

Add Annotations in Plotly 2.0

How to add annotations to your plot.

Step 1

Getting Started

Plotly has many great features to spruce up your graphs, including how to add a logo, but did you know that you can also add notes or annotations to your plot? We've got a few to choose from, so let's go!

Step 2

Add Your Data

The first step is to head to Plotly’s new online workspace and add your data.

Step 3

Create Your Chart

After your data's been added, go to GRAPH on the left-hand side, then 'Create'. Choose your 'Chart type', and add your traces using the X and Y dropdown (this section is different depending on the chart type).

Step 4

The Annotation Section

Go to STYLE on the left-hand side of your workspace, then 'Notes'. Click on the blue '+ Annotation' button at the top of the panel and scroll down the dropdown menu. You're given a few choices, which are all described below.

Annotation button

Step 5

Add a General Annotation

The 'General Annotation' is one to use for general text. Add your note in the 'Note Editor' and feel free to change the typeface, color and size of your text. Note that certain colors and typeface are available with a PRO subscription. You can add an arrow to your text, which is great if you wish to point to a specific place on your plot. There's also an option of positioning your text horizontally and vertically, relative to the canvas or axis.

General Annotation

Step 6

Add an Automatically Positioned Label

The 'Automatically Positioned Labels' feature is really cool. Once you've selected that option, place your cursor on any data point on your plot and then click. The data point can then be moved around on your plot. You can also add an arrow to your data point annotation, and positioning your text horizontally and vertically relative to the data point.

Auto positioned labels

This is a good type of label to select if you wish to put the value of each bar on top of that bar. You just need to type the special token of your value in the text box. In the image below, you'll see the steps we took to show the value of each bar.

Bar height

Step 7

Add a Subtitle

You can also add a 'Subtitle'! Just like the 'General Annotation', you can choose your typeface, color and size of your subtitle, and play with the positioning.

Subtitle

Step 8

Add Source to Data

The 'Source to Data' is exactly that; a note that displays where your data is from. We've typed our source in the 'Note Editor' and a little pop-up with the URL field is shown. That's where we'll add the link to the data source. We'll also move the note on our plot to the bottom right-hand corner of our plot by dragging it there.

Source to data

Step 9

Add a Caption

If you want to include a few sentences describing your data and/or graph, including some of the information you gathered from it, you can do with with the 'Caption' option.

Caption

Step 10

Add a Data Annotation

The 'Data Annotation' option is if you want to add a note to a specific data set. Again, the note can be moved around on your plot. You can also add an arrow, and you can position this annotation horizontally and vertically relative to the canvas or axis.

Data annotation

Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to our Premium or Enterprise plans.