New to Kendo UI for AngularStart a free 30-day trial

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 and set its 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:

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

Change Theme
Theme
Loading ...

Linear Trendline

The linear trendline shows if a particular quantity is increasing or decreasing in time. They are commonly used to create Forecasts.

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

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

Polynomial Trendline

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

This type of trendlines accepts an 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.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

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

Change Theme
Theme
Loading ...

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").

Change Theme
Theme
Loading ...

Date Series and Aggregates

If the main series is using Aggregates, as is most common for Date Series, 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.

Change Theme
Theme
Loading ...

Forecasts

For date and scatter series, trendlines can be extended in both directions by setting the 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 or 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:

Change Theme
Theme
Loading ...

Supported Series Types

Trendlines are supported for the following chart types:

  • "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:

Legend Items

By default, the trendlines are displayed in the 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 option to false:

Change Theme
Theme
Loading ...

Support and Learning Resources

Additional Resources