Custom Axes Lines (Trends)

• Overview
• Adding Axis Line (Trend)
• Precalculated Lines values
• Configuring Label

Overview

Custom axes lines (sometimes referred as trends) are lines bound to an axis, that are drawn through data plot, they can be drawn basing on one value or two values - starting and ending.

These lines are useful when you need to name a highlight some value(s) on an axis, each line can have a label with custom text to describe the value. If you need custom axes labels without line, please take look at Custom Axes Labels article.

You can add custom lines to any axis, both x axis, y axis and additional axes.

Adding axis line (trend)

To add custom line you need to create <axis_markers> subnode in certain axis node (for example <y_axis>) and add <lines> subnode in it. Each custom line is configured in <line> subnode of <lines>:

XML Syntax

• XML Code

01

<y_axis>

02	<axis_markers>

03

<lines>

04	<line value="100" color="Red" />

05	<line start_value="60" end_value="80" color="RoyalBlue" />

06	<line value="50" color="Green" />

07

</lines>

08	</axis_markers>

09

</y_axis>

<y_axis> <axis_markers> <lines> <line value="100" color="Red" /> <line start_value="60" end_value="80" color="RoyalBlue" /> <line value="50" color="Green" /> </lines> </axis_markers> </y_axis>

Each line visualization can be configured as any line or border in AnyChart, refer to Line and Border configuration.

If you need horizontal or vertical line - set only value attribute, if you need inclined line - use start_value and end_value.

The sample below shows horizontal, vertical and inclined custom axes lines on X, Y and additional Y axes.

Note 1: Inclined lines start from the axis and when axis position changes - line is changing the direction.

Note 2: Use display_under_data = "false" to draw line over the chart series.

Live Sample:  Sample Custom Axes Trend Lines

Prcalculated lines values

When setting value for custom line you may either use constant value or Axis Keywords.

Axis keywords are contain several precalculated values that can be used as value. The table below lists all built-in keywords that provide axis data and can be used as a values for custom lines (and ranges).

Using this feature you can add, for example, Average value to any chart you plot, without setting the number for each chart individually.

The sample below shows all possible precalculated lines:

Live Sample:  Sample Custom Axes Trend Lines Precalculated

Configuring label

You can configure label placement, font and text of any custom line.

In <format> you can use {%Value} keyword ({%StartValue} and {%EndValue} for inclined lines). When start_value and end_value are set {%Value} keyword returns an arithmetic mean.

Label placement is controlled using position attribute of <label> node, possible position values are: "Axis", "Near", "Center", "Far","BeforeAxisLabels" and "AfterAxisLabels"..

Sample XML for labels formatting:

XML Syntax

• XML Code

01	<line value="9000" color="Green">

02	<label enabled="true" position="Far">

03	<font color="green" bold="True" />

04	<background enabled="true">

05	<fill color="White" />

06	<border enabled="true" color="Green" />

07	</background>

08	<format><![CDATA[Far]]></format>

09

</label>

10

</line>

<line value="9000" color="Green"> <label enabled="true" position="Far"> <font color="green" bold="True" /> <background enabled="true"> <fill color="White" /> <border enabled="true" color="Green" /> </background> <format>Far</format> </label> </line>

In the sample below you can see different label positions and text formatting:

Live Sample:  Sample Custom Axes Trend Lines Labels