Horizontal Line Annotation

Overview

Horizontal Line annotation allows to add a horizontal line to the chart, as any other annotation it can be drawn by user or added to the chart via XML or JSON settings. In this article you can learn how to add a horizontal line via XML or JSON settings and what visual settings can be done.

To learn about basic settings, that can be done with an annotation please refer to: Drawing Tools and Annotations: General Settings.

to top

Adding annotation via settings

To add a Horizontal line annotation to a chart you need to, as with any other annotation, add an annotation node, assign the id, set "HorizontalLine" type and specify the chart id using chart attribute.

In horizontal_line_annotation node you need specify value anchor, which defines where line is displayed.

All this you can see in the basic XML/JSON snippet below:

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <annotations>
04     <annotation_list>
05       <annotation id="idHorizontalLineAnnotation1" type="HorizontalLine" chart="idMainChart">
06         <horizontal_line_annotation value_anchor="24.92" />
07       </annotation>
08     </annotation_list>
09   </annotations>
10 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "idHorizontalLineAnnotation1",
06        type: "HorizontalLine",
07        chart: "idMainChart",
08        horizontalLineAnnotation: {
09          valueAnchor: 24.92
10        }
11      }
12    ]
13  }
14}

Live sample below shows a chart with this sample basic Horizontal Line annotation:

Live Sample:  Adding Horizontal Line Annotation

to top

Visual settings

You have a total control over the look of the Horizontal Line, to define its visual settings you need to add settings node and then use line node to set how it should look like. Sample XML/JSON snippet below shows this.

If you click on line node in the snippet, XML or JSON reference will be opened and you will be able to browse all possible settings, including the look of the line in different states.

XML/JSON Syntax
Plain code
01 <?xml version="1.0" encoding="UTF-8"?>
02 <stock xmlns="http://anychart.com/products/stock/schemas/1.9.0/schema.xsd">
03   <annotations>
04     <annotation_list>
05       <annotation id="HorizontalLine_6420710795" type="HorizontalLine" chart="idMainChart">
06         <horizontal_line_annotation color="#008000" value_anchor="20">
07           <settings>
08             <line dashed="true" thickness="2" opacity="1" />
09           </settings>
10         </horizontal_line_annotation>
11       </annotation>
12     </annotation_list>
13   </annotations>
14 </stock>
01{
02  annotations: {
03    annotationList: [
04      {
05        id: "HorizontalLine_6420710795",
06        type: "HorizontalLine",
07        chart: "idMainChart",
08        horizontalLineAnnotation: {
09          color: "#008000",
10          valueAnchor: 20,
11          settings: {
12            line: {
13              dashed: true,
14              thickness: 2,
15              opacity: 1
16            }
17          }
18        }
19      }
20    ]
21  }
22}

Live sample below contains several Horizontal line annotations colored and configured in a different way:

Live Sample:  Horizontal Line Annotation - Visual Settings

to top