How to add annotations to your visualization

Please note the annotations module is currently only available in our Scatter, the Line, bar, pie, Marimekko, 3D globe and 3D map templates. You can also add line highlights directly to your "Line, bar, pie" and "Scatter" visualizations. To learn more about line highlights, head over to this help doc.

The annotations module allow you to add labels, blocks of text, connector lines and arrows to your Scatter, Line, bar pie, 3D globe, 3D Viewer, Marimekko and 3D map visualizations. 

    1
    Create your visualization with your data, colors and settings
    2
    Add your visualization to a story by clicking on Create a story in the top-right corner of the visualization editor.

    3
    Inside the story editor, you'll find a pen icon in the right corner of the visualization. Use this to drop in annotations. Simply click where you'd like to add annotation. Wherever you click, an annotation will be added.

    4
    Duplicate an annotation by clicking the "Duplicate" icon and dragging it to its place.



    5
    Once you've added your annotations, you can avoid more from being added on click by clicking on the pen icon again.

    6
    To edit the styling of your annotations, reopen the panel and select which annotation you'd like to edit.

    There you are also able to specify which marker types and connector type styles you'd like your annotation to appear with – if any:

    7
    Through the Text and connector styles options, you can style the annotations through a host of settings, such as font weight, text size, background and text outline and also if you'd like to use arrows as line marks, and have a stroke around your text:

    8
    Device visibility settings include which devices you'd like your annotations to be visible on – these are:

    • Always show the annotation on every device
    • Only show on desktop sizes
    • Only show on mobile sizes
    • Show the annotation regularly on desktop sizes and as a popup on mobile sizes
    It's also possible to include HTML in your annotations, so you can use this to add links, styling or even images. Here's an example of styling applied to an annotation: 
    <span style="color: #ffdc5c"><b>MANAGEMENT:</b></br> Gaming managers</span><br>
    And here's an image: 

    <img src="https://public.flourish.studio/uploads/eb9912a9-2a55-429b-bd93-685576f51d90.png" style="width: 200px"/>
    9
    If you're not happy with the position of your annotation text, simply drag it to a different place.

    10
    If you only want to add annotations to this one visualization and don't want to add more slides to your story, turn off the navigation. This will remove the captions text area and the arrows, and your visualization is ready to be published!

Related Articles