A guide to annotate your charts

everviz is an online visualization tool that helps you create interactive charts and maps.Embed your interactive visualizations on your website, blog og intranet. You can also export them as images or PDF for offline and print.
Why not try it yourself? It only takes a minute to create your first chart.

Sometimes a chart or map is not enough to clearly communicate the data on its own. Annotations can be helpful for showing when key events occurred, especially when you have a drastic change in the data. With the annotations feature, you can help the audience better understand the context and your argument.

This guide explains how you can annotate your chart using everviz.

From the Annotations section in the editor you can add the following annotations:

  • Text labels
  • Highlights
  • Lines

The Annotations section is found in the Customize section under Annotations.

Annotations menu

Working with Text labels

Add a Text label

To add a new text label

  1. Click on the “+” next to the Text labels
  2. Click anywhere in the chart where you want to position the Text label

add label

Now that you have added the label, you can start customizing it.

Position a label

To move a label to a different position, select the label in the preview and move it to a desired position by dragging it with your mouse. When the label is selected you can also drag the handle in the arrow to move the arrow position

Position label

Changing text and styling options

When the text label is selected you can customize the following options in the left

Customize label
TextSet desired Label text
TypeChoose between Callout, Connector or circle. The main difference between callout and connector is that the callout supports background color
Text sizeSet text size
Text colorSet text color
Background colorPick background color for the Label

Delete a label

To delete an existing label, select the label and click on the delete icon, or use hit the backspace key on your keyboard.

Responsive text labels

To support responsiveness in the chart, the text label will be shown as a number reference on small screen sizes and the text you have entered will be displayed below the chart. See the following screencast as an example

This image has an empty alt attribute; its file name is annotation-responsive.gif

Working with Highlights

When you create charts, sometimes there are area you want to point out or put some focus on….or maybe just highlight!

Here are two examples showing the concept:

Chart with a horizontal highlight range

This block contains unexpected or invalid content.ResolveConvert to HTML

Chart with two vertical highlight lines:

This block contains unexpected or invalid content.ResolveConvert to HTML

Add a Highlight

To add a new Highlight, click on the “+” button

Add highlight

Position a Highlight

To move a Highlight to a different position, select the Highlight in the preview and move it to a desired position. Drag the handles to resize the highlight range

resize and position

Changing text and styling options

When you have selected a Highlight, the you can select the following options in the editor on the left:

Highlight typeChoose between Range or line
OrientationChoose vertical or horizontal orientation of the Highlight
LabelInsert optional label for the Highlight
Label colorPick a label color
ColorPick a color and transparency value for the Highlight
Vertical AlignVertical align for the label. Top, middle or bottom
Horizontal AlignHorizontal align for the label. Center, left or right

Delete a Highlight

To delete an existing Highlight, select the Highlight and click on the delete button.

Working with Lines and arrows

Adding a “hand-drawn” line can also be useful if you want help your audience better understand the context and your argument.

Here is a sample showing the concept

This block contains unexpected or invalid content.ResolveConvert to HTML

Add a Line or arrow

To add a new text label

  1. Click on the “+” next to the Lines section
  2. Click anywhere in the chart where you want to position the Line

To move a Line to a different position, select the Line in the preview and move it to a desired position. Drag the handles to resize or change the line orientation

Create an arrow

Change styling options

When you have selected a Line, the you can select the following options in the editor on the left:

TypeChoose between Line or Arrow
SizeSet line size
Line colorPick a Line color

Delete a Line

To delete an existing Line, select the Highlight and click on the delete button.

 

Questions or ideas? Get in touch!

Would love to hear your thoughts, please get in touch!

We are everviz. We believe that telling stories with beautiful interactive visualizations makes the message easier to understand and more engaging. Our mission is to make it easy for anyone to create and publish stunning visualizations to tell compelling stories.