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

Series.trendline

configuration

The trendline configuration options.

The trendline option is supported when series.type is set to "linearTrendline", "exponentialTrendline", "logarithmicTrendline", "powerTrendline" or "movingAverageTrendline".

series.trendline

Object

  <div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2021-01-01"),
            price: 111
        }, {
            date: new Date("2021-04-01"),
            price: 121
        }, {
            date: new Date("2021-07-01"),
            price: 105
        }, {
            date: new Date("2021-10-01"),
            price: 105
        }]
    },
    dateField: "date",
    series: [{
        name: "Price",
        type: "line",
        field: "price"
    }, {
        name: "Average",
        type: "movingAverageTrendline",
        for: "Price",
        trendline: {
          period: 3
        }
    }],
    legend: {
        visible: true,
        position: 'bottom'
    }
});
</script>

series.trendline.forecast

Object

The trendline forecast settings. By default, the trendline does not display a forecast.

The forecast option is supported when series.type is set to "linearTrendline", "exponentialTrendline", "logarithmicTrendline" or "powerTrendline" and the parent series are either Date Series, "scatter" or "scatterLine" series.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2021-01-01"),
            price: 111
        }, {
            date: new Date("2021-02-01"),
            price: 141
        }, {
            date: new Date("2021-03-01"),
            price: 151
        }, {
            date: new Date("2021-04-01"),
            price: 121
        }, {
            date: new Date("2021-05-01"),
            price: 111
        }, {
            date: new Date("2021-06-01"),
            price: 111
        }, {
            date: new Date("2021-07-01"),
            price: 145
        }, {
            date: new Date("2021-08-01"),
            price: 125
        }, {
            date: new Date("2021-09-01"),
            price: 145
        }, {
            date: new Date("2021-10-01"),
            price: 135
        }, {
            date: new Date("2021-11-01"),
            price: 155
        }, {
            date: new Date("2021-12-01"),
            price: 185
        }]
    },
    dateField: "date",
    series: [{
        name: "Price",
        type: "line",
        field: "price"
    }, {
        name: "Forecast",
        type: "linearTrendline",
        for: "Price",
        trendline: {
            forecast: {
                before: 3,
                after: 20
            }
        }
    }],
    legend: {
        visible: true,
        position: 'bottom'
    }
});
</script>

series.trendline.order

Number

The order (degree) of the Polynomial trendline. The default value is 2.

Accepted values are from 2 to 6:

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

Default: 2

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [{
            date: new Date("2021-01-01"),
            price: 111
        }, {
            date: new Date("2021-02-01"),
            price: 141
        }, {
            date: new Date("2021-03-01"),
            price: 151
        }, {
            date: new Date("2021-04-01"),
            price: 121
        }, {
            date: new Date("2021-05-01"),
            price: 111
        }, {
            date: new Date("2021-06-01"),
            price: 111
        }, {
            date: new Date("2021-07-01"),
            price: 145
        }, {
            date: new Date("2021-08-01"),
            price: 125
        }, {
            date: new Date("2021-09-01"),
            price: 145
        }, {
            date: new Date("2021-10-01"),
            price: 135
        }, {
            date: new Date("2021-11-01"),
            price: 155
        }, {
            date: new Date("2021-12-01"),
            price: 185
        }]
    },
    dateField: "date",
    series: [{
        name: "Price",
        type: "line",
        field: "price"
    }, {
        name: "Trend",
        type: "polynomialTrendline",
        for: "Price",
        trendline: {
            order: 3
        }
    }],
    legend: {
        visible: true,
        position: 'bottom'
    }
});
</script>

series.trendline.period