React Chart Trendlines
In Ignite UI for React charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the IgrCategoryChart
, IgrFinancialChart
, and IgrDataChart
(except for stacked series, shape series, and range series).
Trendlines are off by default, but you can enable them by setting the trendLineType
property. Also, you can modify multiple appearance properties of trendlines such as its brush, period, and thickness.
The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the TrendLineDashArray
property to an array of numbers. The numeric array describes the length of the dashes of the trendline.
React Chart Trendlines Example
The following sample depicts a IgrFinancialChart
showing the stock trend of Microsoft between 2013 and 2017 with a QuinticFit trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down.
React Chart Trendlines Dash Array Example
The following sample depicts a IgrDataChart
showing a IgrFinancialPriceSeries
with a QuarticFit dashed trendline applied via the trendLineDashArray
property:
React Chart Trendline Layer
The TrendLineLayer
is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the TrendLineLayer
is a series type, you can add more than one of them to the IgrSeries
collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously.
Trendline Layer Usage
The TrendLineLayer
must be provided with a TargetSeries
and a trendLineType
in order to work properly. The different trendline types that are avilable are the same as the trendlines that are available on the series.
If you would like to show the TrendLineLayer
in the Legend, you can do so by setting the UseLegend
property to true
.
Styling the Trendline Layer
By default, the TrendLineLayer
renders with the same color as its TargetSeries
in a dashed line. This can be configured by using the various styling properties on the TrendLineLayer
.
To change the color of the trendline that is drawn, you can set its brush
property. Alternatively, you can also set the UseIndex
property to true
, which will pull from the chart's brushes
palette based on the index in which the TrendLineLayer
is placed in the chart's IgrSeries
collection.
You can also modify the way that the TrendLineLayer
appears by using its AppearanceMode
and ShiftAmount
properties. The ShiftAmount
takes a value between -1.0 and 1.0 to determine how much of a "shift" to apply to the options that end in "Shift".
The following are the options for the AppearanceMode
property:
Auto
: This will default to the DashPattern enumeration.BrightnessShift
: The trendline will take theTargetSeries
brush and modify its brightness based on the providedShiftAmount
.DashPattern
: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using thedashArray
property on theTrendLineLayer
.OpacityShift
: The trendline will take theTargetSeries
brush and modify its opacity based on the providedShiftAmount
.SaturationShift
: The trendline will take theTargetSeries
brush and modify its saturation based on the providedShiftAmount
.
Additional Resources
You can find more information about related chart features in these topics:
API References
The IgrCategoryChart
and IgrFinancialChart
components share the following API properties:
In the IgrDataChart
component, most types of series have the following API properties: