Trend Channel Annotation

Overview
Adding annotation via settings
Visual settings

Overview

Trend Channel annotation allows to add a trend channels, or price channels, 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 trend channel 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.

Adding annotation via settings

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

In trend_channel_annotation node you need anchors, which define three points on which channel is based.

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

XML/JSON Syntax

XML Code
JSON 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="TrendChannel_0856719161" type="TrendChannel" chart="idMainChart">
        
            06
                    <trend_channel_annotation first_time_anchor="2009-02-24" first_value_anchor="13.62" second_time_anchor="2008-09-19" second_value_anchor="20.04" third_time_anchor="2009-01-23" third_value_anchor="23.25" />
        
            07
                  </annotation>
        
            08
                </annotation_list>
        
            09
              </annotations>
        
            10
            </stock>

01{
02  annotations: {
03    annotationList: [
04      {
05        id: "TrendChannel_0856719161",
06        type: "TrendChannel",
07        chart: "idMainChart",
08        trendChannelAnnotation: {
09          firstTimeAnchor: "2009-02-24",
10          firstValueAnchor: 13.62,
11          secondTimeAnchor: "2008-09-19",
12          secondValueAnchor: 20.04,
13          thirdTimeAnchor: "2009-01-23",
14          thirdValueAnchor: 23.25
15        }
16      }
17    ]
18  }
19}

Live sample below shows a chart with this sample basic Trend Channel annotation:

Live Sample: Adding Trend Channel Annotation

Visual settings

You have a total control over the look of the channel, to define visual settings you need to add settings node and then use first_line, second_line and fill nodes to set how it should look like. Sample XML/JSON snippet below shows this.

If you click on nodes 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 channel in different states.

XML/JSON Syntax

XML Code
JSON 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="TrendChannel_0856719161" type="TrendChannel" chart="idMainChart">
        
            06
                    <trend_channel_annotation color="#008000" first_time_anchor="2009-02-24" first_value_anchor="22.02" second_time_anchor="2009-03-23" second_value_anchor="23.24" third_time_anchor="2009-02-24" third_value_anchor="13.67">
        
            07
                      <settings>
        
            08
                        <first_line dashed="false" thickness="2" />
        
            09
                        <second_line dashed="false" thickness="2" />
        
            10
                        <fill enabled="false" />
        
            11
                      </settings>
        
            12
                    </trend_channel_annotation>
        
            13
                  </annotation>
        
            14
                </annotation_list>
        
            15
              </annotations>
        
            16
            </stock>

01{
02  annotations: {
03    annotationList: [
04      {
05        id: "TrendChannel_0856719161",
06        type: "TrendChannel",
07        chart: "idMainChart",
08        trendChannelAnnotation: {
09          color: "#008000",
10          firstTimeAnchor: "2009-02-24",
11          firstValueAnchor: 22.02,
12          secondTimeAnchor: "2009-03-23",
13          secondValueAnchor: 23.24,
14          thirdTimeAnchor: "2009-02-24",
15          thirdValueAnchor: 13.67,
16          settings: {
17            firstLine: {
18              dashed: false,
19              thickness: 2
20            },
21            secondLine: {
22              dashed: false,
23              thickness: 2
24            },
25            fill: {
26              enabled: false
27            }
28          }
29        }
30      }
31    ]
32  }
33}

Live sample below contains several Trend channel annotations colored and configured in a different way:

Live Sample: Trend Channel Annotation - Visual Settings