Web Components Chart Trendlines

In Ignite UI for Web Components 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 IgcCategoryChartComponent, IgcFinancialChartComponent, and IgcDataChartComponent (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.

Web Components Chart Trendlines Example

The following sample depicts a IgcFinancialChartComponent 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.

Web Components Chart Trendlines Dash Array Example

The following sample depicts a IgcDataChartComponent showing a IgcFinancialPriceSeriesComponent with a QuarticFit dashed trendline applied via the trendLineDashArray property:

Additional Resources

You can find more information about related chart features in these topics:

• Chart Annotations
• Chart Highlighting

API References

The IgcCategoryChartComponent and IgcFinancialChartComponent components share the following API properties:

• trendLineBrushes
• trendLinePeriod
• trendLineThickness
• trendLineType

In the IgcDataChartComponent component, most types of series have the following API properties:

• trendLineBrush
• trendLineDashArray
• trendLinePeriod
• trendLineThickness
• trendLineType