Annotations with Highcharts Cloud


Blog Posts Cloud Data Journalism Tutorials0 comments

Featured image
Highcharts Cloud is now Everviz. If you have used Highcharts Cloud before, click here to read about what this means to you.
Otherwise, click here to try out Everviz!

In this tutorial, you will learn how to add annotations to your charts using Highcharts Cloud.
Annotations are useful for bringing attention to specific points of interest. See an example in the chart below, showing the effect of insulin on fat breakdown:

Link to the demo

Here the annotations (red and green callout boxes) are used to draw attention to specific points on the chart while providing additional information and details, thereby helping the reader better understand what the data-story is.

From this simple example, you should have a basic idea of the purpose and benefit of annotations.

Adding annotations is easy and intuitive; I created a dedicated video about how to do set up annotations with Highcharts Cloud. Feel free to check the video, or read on, as I will summarize the main steps below.

Unless you have an existing chart, the first step is to create a chart. Then go to the customize section and click on the annotations icon. Then choose the type of annotation you would like to use.

Now, click anywhere on the chart where you would like to add details to any specific point of interest. Here are quick tips for managing the placement and text of the annotation:

  1. Click once on the annotation:
    • To adjust its position use the circle
    • To adjust where the annotation is pointing use the triangle
    • To delete the annotation click on the bin

  1. Double click on the annotation to style it:
    • Add a text in the Text field
    • Change the color background
    • Click Save

Another useful capability that the annotation offers is the ability to use HTML inside labels.
For example, let’s put the sentence Low levels of insulin in bold using the b tag, and insert a line break with the BR tag. You can also use a carriage return.

Now, you have another practical and powerful data visualization skills to create effective charts. Feel free to try annotations and share your experience in the comment sections below.

 

For your convenience, here is the video tutorial as well.

Consent for marketing cookies needs to be given to post comments