Trend Channel

Overview

The Trend Channel annotation allows to add a trend channel to a chart.

This article explains how to add a Trend Channel and configure its basic and visual settings. You can find more settings and other useful information in the articles describing annotations in general:

Basic Settings

To add a Trend Channel annotation to a chart, call the trendChannel() method of the annotations() object.

Next, use the xAnchor(), valueAnchor(), secondXAnchor(), secondValueAnchor(), thirdXAnchor() and thirdValueAnchor() methods to set 3 points that determine the position of the trend channel. Usually, the most convenient way to do this is object notation:

// create a stock chart
chart = anychart.stock();

// create a plot on the chart
var plot = chart.plot(0);

// access the annotations() object of the plot to work with annotations
var controller = plot.annotations();

// create a Trend Channel annotation
controller.trendChannel({
    xAnchor: "2007-01-07",
    valueAnchor: 28.92,
    secondXAnchor: "2007-09-23",
    secondValueAnchor: 33.13,
    thirdXAnchor: "2006-07-30",
    thirdValueAnchor: 17.24
});

This is how it looks like:

JsFiddle Playground

Visual Settings

You can also configure the visual settings of a Trend Channel annotation:

In the sample below, there are two Trend Channel annotations with some of the visual settings configured (by using an object in the first case and methods in the second):

// create the first Trend Channel annotation and configure its visual settings
trendChannel1 = controller.trendChannel({
    xAnchor: "2007-01-07",
    valueAnchor: 28.92,
    secondXAnchor: "2007-09-23",
    secondValueAnchor: 33.13,
    thirdXAnchor: "2006-07-30",
    thirdValueAnchor: 17.24,
    hoverFill: "#398CAE 0.3",
    hoverStroke: "2 #FF0000",
    selectFill: "#398CAE 0.3",
    selectHatchFill: "brick",
    selectStroke: "5 #FF0000"
});

// create the second Trend Channel annotation
trendChannel2 = controller.trendChannel();

// set the position of the second annotation
trendChannel2.xAnchor("2004-01-11");
trendChannel2.valueAnchor(29.13);
trendChannel2.secondXAnchor("2005-10-30");
trendChannel2.secondValueAnchor(17.87);
trendChannel2.thirdXAnchor("2004-08-08");
trendChannel2.thirdValueAnchor(17.86);

// configure the visual settings of the second annotation
trendChannel2.stroke("#2196F3", 3, "10 2");
trendChannel2.fill(null);

JsFiddle Playground

You are looking at an outdated 7.12.0 version of this document. Switch to the 8.0.1 version to see the up to date information.