Version

Configuring the Trend Line

Purpose

This topic explains, with code examples, how to configure the trend line of XamSparkline™ for custom appearance and color.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic Purpose

This topic provides an overview of the XamSparkline control, its benefits, and the supported chart types.

This topic provides an overview of the possible ways to configure the XamSparkline control. Links to the detailed configurations (available in separate topics) are provided as well.

This topic explains, with code example, how to add a trend line over the XamSparkline control.

Configuring the Trend Line – Conceptual Overview

Overview

By default, the trend line is not displayed in the Sparkline chart. The minimum setting for displaying the trend line is enabling it by setting the TrendLineVisibilty property to Visible. A Trend Line configured with the minimum settings a line (based on selected trend line type) is a gray horizontal directional line with line thickness of 1 pixel.

The Trend Line can be customized in the following aspects:

  • Type – numerous trend line types are supported. For details, refer to the Supported trendline types text block of the XamSparkline Features topic.

  • Line color

  • Line thickness

  • Line period – used for calculating the moving average of the trend line. Applicable to trend lines of Average types only (not for Fit types). For example, you can set the line period for Simple Average or Exponential Average trend lines, but not for Linear Fit or [other] type of Fit trend lines.

Each of these aspects is managed through a dedicated property. See the Property settings text block for details.

Property settings

The following table maps the configuration tasks to the corresponding Trend Line property settings.

In order to: Use this property: And set it to:

Specify the trend line type

The desired trend line type

Change the color of the trend line

The name of the color

Change the thickness of the trend line

The desired numeric value

Change the period of the trend line

The desired numeric value (integer)

Configuring the Trend Line – Code Example

Description

The code below demonstrates how to configure a red trend line of Simple Average type that is 3 pixels thick and have a period of 2.

Preview

Configuring the Trend Line.png

Property settings

Property Setting

SimpleAverage

Red

3

2

Code

In XAML:

<igSparkline:XamSparkline
            TrendLineType="SimpleAverage"
            TrendLineBrush="Red"
            TrendLinePeriod="2"
            TrendLineThickness="3"/>

In C#:

this.XamSparkline1.TrendLineType = SparklineTrendType.SimpleAverage;
this.XamSparkline1.TrendLineBrush = new SolidColorBrush(Colors.Red);
this.XamSparkline1.TrendLinePeriod = 2;
this.XamSparkline1.TrendLineThickness = 3;

In Visual Basic:

Me.XamSparkline1.TrendLineType = SparklineTrendType.SimpleAverage
Me.XamSparkline1.TrendLineBrush = New SolidColorBrush(Colors.Red)
Me.XamSparkline1.TrendLinePeriod = 2
Me.XamSparkline1.TrendLineThickness = 3

Related Content

The following topic provide additional information related to this topic.

Topic Purpose

This topic explains the featured properties of the XamSparkline control.