New to Kendo UI for Vue? Start a free 30-day trial

Trendlines

Trendlines (or trend lines) are automatically generated indicators that show the 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 prop to the parent series name:

Example
View Source
Change Theme:

Trendline Types

The Chart supports the following types of trendlines:

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.

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

Polynomial Trendline

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

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

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

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

Example
View Source
Change Theme:

Date Series and Aggregates

If the main series is using Aggregates, as is most common for Date Series, the trendlines will bind to the aggregated data. For example, if you're using a "sum" aggregate, the trendline will plot the trend for the sums in each category.

Example
View Source
Change Theme:

Forecasts

For date and scatter series, trendlines can be extended in both directions using the forecast setting on the trendline.

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.

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

Example
View Source
Change Theme:

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 will also hide the trendlines.

To hide the trendlines from the legend, set their visibleInLegend option to false:

Example
View Source
Change Theme: