# Trendlines

Trendlines (or trend lines) are automatically generated indicators that show the overall trends in the series data.

## Defining Trendlines

Trendlines are defined as a special type of series that are linked to the main series by **name**.

To define a trendline, define a [series item](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#for) and set its [`for`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#for) attribute to the parent series name:

```html
<kendo-chart-series-item
    name="Sales By Quarter"
    type="line"
    ...
></kendo-chart-series-item>
<kendo-chart-series-item
    name="Sales Trendline (LINEAR)"
    type="linearTrendline"
    for="Sales By Quarter"
></kendo-chart-series-item>
```

The Chart supports the following types of trendlines:

* [Linear Trendline](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#linear-trendline)
* [Exponential Trendline](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#exponential-trendline)
* [Logarithmic Trendline](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#logarithmic-trendline)
* [Power Trendline](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#power-trendline)
* [Polynomial Trendline](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#polynomial-trendline)
* [Moving Average](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#moving-average-trendline)

The following example demonstrates how to add trendlines to chart series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/basic/source.txt)

## Linear Trendline

The linear trendline shows if a particular quantity is increasing or decreasing in time. They are commonly used to create [Forecasts](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#forecasts).

The following example demonstrates how to create a linear trendline for Categorical series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/linear/categorical/source.txt)

The following example demonstrates how to create a linear trendline for Scatter series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/linear/scatter/source.txt)

## Exponential Trendline

Exponential trendlines are most suitable for data sets with accelerating rate of growth or decline. They can be used only for positive values.

The following example demonstrates how to create an exponential trendline for Categorical series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/exponential/categorical/source.txt)

The following example demonstrates how to create an exponential trendline for Scatter series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/exponential/scatter/source.txt)

## Logarithmic Trendline

Logarithmic trendlines are best suited for data sets that grow quickly at the beginning and then taper off. They can only be use with both positive and negative values.

The following example demonstrates how to create a logarithmic trendline for Categorical series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/logarithmic/categorical/source.txt)

The following example demonstrates how to create a logarithmic trendline for Scatter series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/logarithmic/scatter/source.txt)

## Power Trendline

Similar to Linear trendlines, power trendlines. They can be used only with positive values.

The following example demonstrates how to create a power trendline for Categorical series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/power/categorical/source.txt)

The following example demonstrates how to create a power trendline for Scatter series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/power/scatter/source.txt)

## Polynomial Trendline

Polynomial trendlines are best suited for data series that alternates between growth and decline.

This type of trendlines accepts an [`order`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriestrendline#order) parameter that specifies the degree of the polynomial.
The default order is 2. Accepted values are from 2 to 6:

* 2: a Quadratic polynomial with a single extreme point (minimum or maximum) point.
* 3: a Cubic polynomial with up to 2 extreme points.
* 4: a polynomial of 4th degree with up to 3 extreme points.
* 5: a polynomial of 5th degree with up to 4 extreme points.
* 6: a polynomial of 6th degree with up to 5 extreme points.

The following example demonstrates how to create a polynomial trendline for Categorical series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/polynomial/categorical/source.txt)

The following example demonstrates how to create a polynomial trendline for Scatter series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/polynomial/scatter/source.txt)

## Moving Average Trendline

The moving average trendline is used to smooth out the variations in the data by averaging all points in a period. By default, the period is set to `2` chart intervals.

The following example demonstrates how to create a moving average trendline for Categorical series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/moving-average/categorical/source.txt)

The following example demonstrates how to create a moving average trendline for Scatter series.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/moving-average/scatter/source.txt)

## Data Binding

Trendline series use the data from the main series and do not support binding to a different data set. However, it's possible to bind to a different data field.

The following example demonstrates binding to the `'low'` field of the main OHLC series. Please note, that the trendline must use the canonical field name ("**low**") and not the data item name ("**Low**").

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/custom-field/source.txt)

### Date Series and Aggregates

If the main series is using [Aggregates](https://www.telerik.com/kendo-angular-ui-develop/components/charts/data-binding/binding-series#handling-duplicate-categories), as is most common for [Date Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes#displaying-dates), the trendlines bind to the aggregated data. For example when using the `"sum"` aggregate, the trendline plot the trend for the sums in each category.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/date-series/source.txt)

## Forecasts

For date and scatter series, trendlines can be extended in both directions by setting the [`forecast`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriestrendline#forecast) property.

> The setting has no effect for Moving Average trendlines as this type does not support forecasts.

To enable the forecast for a trendline, set the [`before`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/trendlineforecast#before) or [`after`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/trendlineforecast#after) properties to the desired number of intervals.

```html
<kendo-chart-series-item-trendline
    [forecast]="{ before: 2, after: 5 }"
></kendo-chart-series-item-trendline>
```

The example below demonstrates how to add a forecast to a trendline:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/forecast/source.txt)

## Supported Series Types

Trendlines are supported for the following [chart types](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriestype):

* `"area"`
* `"bar"`
* `"boxPlot"`
* `"bubble"`
* `"bullet"`
* `"candlestick"`
* `"column"`
* `"horizontalWaterfall"`
* `"line"`
* `"ohlc"`
* `"pie"`
* `"polarArea"`
* `"polarLine"`
* `"polarScatter"`
* `"radarArea"`
* `"radarColumn"`
* `"radarLine"`
* `"rangeArea"`
* `"rangeBar"`
* `"rangeColumn"`
* `"scatter"`
* `"scatterLine"`
* `"verticalArea"`
* `"verticalBoxPlot"`
* `"verticalBullet"`
* `"verticalLine"`
* `"verticalRangeArea"`
* `"waterfall"`

## Customization

The trendlines support many of the common series options:

* [color](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#color)
* [dashType](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#dashtype)
* [field](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#field)—(see [notes on data binding](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/trendlines#data-binding)).
* [highlight](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#highlight)
* [labels](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#labels)
* [markers](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#markers)
* [lineStyle](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#linestyle)
* [name](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#name)
* [opacity](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#opacity)
* [tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#tooltip)
* [type](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#type)
* [visible](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#visible)
* [visibleInLegend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#visibleinlegend)
* [width](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#width)
* [zIndex](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#zindex)

## Legend Items

By default, the trendlines are displayed in the [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/legend). They can be toggled by clicking on the legend item as regular series. Hiding the main series also hide the trendlines.

To hide the trendlines from the legend, set their [`visibleInLegend`](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api/seriesitemcomponent#visibleinlegend) option to `false`:

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/charts/elements/trendlines/hidden-legend-item/source.txt)

## Support and Learning Resources

* [Getting Started with the Kendo UI for Angular Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/installation/getting-started)
* [API Reference of the Chart](https://www.telerik.com/kendo-angular-ui-develop/components/charts/api)
* [Axes](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/axes)
* [Legend](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/legend)
* [Series](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/series)
* [Title](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/title)
* [Tooltip](https://www.telerik.com/kendo-angular-ui-develop/components/charts/elements/tooltips)
* [Getting Started with Kendo UI for Angular (Online Guide)](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started)
* [Getting Started with Kendo UI for Angular (Video Tutorial)](https://www.telerik.com/campaigns/kendo-ui/using-kendo-ui-with-angular-video-tutorial)
* [Video Courses](https://www.telerik.com/kendo-angular-ui-develop/components/getting-started/video-onboarding)
* [Chart Forum](https://www.telerik.com/forums/kendo-angular-ui?tagId=256)
* [Before You Start: All Things Angular (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-angular)
* [Knowledge Base](https://www.telerik.com/kendo-angular-ui-develop/components/knowledge-base)

## Additional Resources

* [Angular Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-angular)
* [Angular Videos](https://www.telerik.com/videos/kendo-angular-ui)
* [Kendo UI for Angular Roadmap](https://www.telerik.com/support/whats-new/kendo-angular-ui/roadmap)