Stop hesitating, start annotating
Introducing Flourish drag-and-drop annotations to help your graphics tell better stories
This week we’re celebrating the launch of drag-and-drop annotations in line and bar charts. This feature has been live in our Scatter template for a few months; it’s now in the “Line, Bar, Pie” template; and we will be adding it to more templates in the coming months.
Alongside descriptive titles, annotations are a key tool for helping viewers interpret a chart. Drawing attention to certain elements can make a graphic more informative and easier to read, in addition to proving useful context or clarifying your argument.
When you have drastic changes in your data (like in the line chart above) or one or more outliers (like in the beeswarm plot below), viewers will naturally wonder what these data points represent. Annotations can answer these questions “in place”, rather than relying on the viewer reading separate accompanying text.
Annotations also give you the freedom to place arbitrary data labels – for example positioning labels nicely over large blocks of color on stacked areas charts or streamgraphs rather than relying on a legend.
Less is more
While you might want to explain each and every thing that is happening in your data, it’s best to avoid too much clutter and focus on the chart’s main story or a few key events.
How to add annotations in Flourish
Annotations are accessed in the Flourish story editor, so to annotate a chart that you’re working on in the visualization editor, the first step is to click “Create a story”.
Once you’re in the story editor, click the small pen icon in the top-right corner of your chart to open the annotations panel. With this open, you can now click on any valid region of the chart to add an annotation. Annotations are anchored relative to the x-axis and y-axis position, so they will highlight the correct point even if the chart is displayed at a different size.
You can add labels, blocks of text, connector lines and arrows, and further customize the styling in the annotations panel. Click on any existing annotation to select it, drag it around or edit its styles.
You can add mobile-only and desktop-only annotations to ensure your annotations display nicely across different devices, or use the “popup on mobile” option to create a visible annotation on desktop with a popup version on mobile.
If you’re only annotating a single visualization, you can disable the navigation panel at the top to create a single-slide story.
Annotations aren’t just for charts
We’re looking forward to rolling out annotations to other templates soon, including charts, maps and other types of graphics. One thing we’re proud of is how the system also works nicely in 3D space, so you’ll find very soon on our 3D map templates. In the meantime, here’s a three-dimensional sneak peek in our 3D model viewer template (which is reserved for customers on our Enterprise plan):
Keep your eyes on our newsletter or changelog for more annotation features. And do let us know what you think!
Note: although we didn’t use it directly, our annotation system was partly inspired by an open-source system developed by the brilliant Susie Lu. Thanks Susie!