{"id":641,"date":"2020-02-05T06:30:00","date_gmt":"2020-02-05T06:30:00","guid":{"rendered":"https:\/\/www.everviz.com\/blog\/?p=641"},"modified":"2023-07-27T11:23:32","modified_gmt":"2023-07-27T11:23:32","slug":"annotations-with-everviz","status":"publish","type":"post","link":"https:\/\/www.everviz.com\/blog\/annotations-with-everviz\/","title":{"rendered":"A guide to annotate your charts"},"content":{"rendered":"\n
<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
This guide explains how you can annotate your chart using everviz.<\/p>\n\n\n\n
From the Annotations section in the editor you can add the following annotations:<\/p>\n\n\n\n
The Annotations section is found in the Customize section under Annotations.<\/p>\n\n\n\n To add a new text label<\/p>\n\n\n\n <\/p>\n\n\n\n Now that you have added the label, you can start customizing it.<\/p>\n\n\n\n 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<\/p>\n\n\n\n When the text label is selected you can customize the following options in the left<\/p>\n\n\n\n To delete an existing label, select the label and click on the delete icon, or use hit the backspace key on your keyboard.<\/p>\n\n\n\n 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<\/p>\n\n\n\n When you create charts, sometimes there are area you want to point out or put some focus on….or maybe just highlight!<\/p>\n\n\n\n Here are two examples showing the concept:<\/p>\n\n\n\n Chart with a horizontal highlight range<\/p>\n\n\n\n This block contains unexpected or invalid content.ResolveConvert to HTML<\/p>\n\n\n\n Chart with two vertical highlight lines:<\/p>\n\n\n\n This block contains unexpected or invalid content.ResolveConvert to HTML<\/p>\n\n\n\n To add a new Highlight, click on the “+” button<\/p>\n\n\n\n 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<\/p>\n\n\n\n When you have selected a Highlight, the you can select the following options in the editor on the left:<\/p>\n\n\n\n To delete an existing Highlight, select the Highlight and click on the delete button.<\/p>\n\n\n\n Adding a “hand-drawn” line can also be useful if you want help your audience better understand the context and your argument.<\/p>\n\n\n\n Here is a sample showing the concept<\/p>\n\n\n\n This block contains unexpected or invalid content.ResolveConvert to HTML<\/p>\n\n\n\n To add a new text label<\/p>\n\n\n\n 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<\/p>\n\n\n\n When you have selected a Line, the you can select the following options in the editor on the left:<\/p>\n\n\n\n To delete an existing Line, select the Highlight and click on the delete button.<\/p>\n","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":3,"featured_media":642,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[26],"tags":[51,33],"acf":[],"yoast_head":"\nWorking with Text labels<\/h2>\n\n\n\n
Add a Text label<\/h3>\n\n\n\n
\n
Position a label<\/h3>\n\n\n\n
Changing text and styling options<\/h3>\n\n\n\n
Text<\/td> Set desired Label text<\/td><\/tr> Type<\/td> Choose between Callout, Connector or circle. The main difference between callout and connector is that the callout supports background color<\/td><\/tr> Text size<\/td> Set text size<\/td><\/tr> Text color<\/td> Set text color<\/td><\/tr> Background color<\/td> Pick background color for the Label<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Delete a label<\/h3>\n\n\n\n
Responsive text labels<\/h3>\n\n\n\n
Working with Highlights<\/h2>\n\n\n\n
Add a Highlight<\/h3>\n\n\n\n
Position a Highlight<\/h3>\n\n\n\n
Changing text and styling options<\/h3>\n\n\n\n
Highlight type<\/td> Choose between Range or line<\/td><\/tr> Orientation<\/td> Choose vertical or horizontal orientation of the Highlight<\/td><\/tr> Label<\/td> Insert optional label for the Highlight<\/td><\/tr> Label color<\/td> Pick a label color<\/td><\/tr> Color<\/td> Pick a color and transparency value for the Highlight<\/td><\/tr> Vertical Align<\/td> Vertical align for the label. Top, middle or bottom<\/td><\/tr> Horizontal Align<\/td> Horizontal align for the label. Center, left or right<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Delete a Highlight<\/h3>\n\n\n\n
Working with Lines and arrows<\/h2>\n\n\n\n
Add a Line or arrow<\/h3>\n\n\n\n
\n
Change styling options<\/h3>\n\n\n\n
Type<\/td> Choose between Line or Arrow<\/td><\/tr> Size<\/td> Set line size<\/td><\/tr> Line color<\/td> Pick a Line color<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n Delete a Line<\/h3>\n\n\n\n