HelpBot Assistant

How can I help you?

Trend lines in Vue Chart component

3 Feb 202624 minutes to read

Trendlines help identify patterns, direction, and overall trends in numerical data. They project the general movement of data values and are widely used in analytics, forecasting, and financial charts. Trendlines can be added to Cartesian series types such as Line, Column, Scatter, Area, Candle, and Hilo (excluding bar series). Multiple trendlines can be added to a single series based on the analysis needs.

Charts support six types of trendlines: Linear, Exponential, Logarithmic, Polynomial, Power, and Moving Average.

Linear

A linear trendline is a straight, best‑fit line used to describe data with a constant rate of increase or decrease. Set the trendline type to Linear and inject the TrendLines module using provide.

<template>
    <div id="app">
        <ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
                    <e-trendlines>
                        <e-trendline :type='type'>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";


let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}

const seriesData = series1;
const primaryXAxis = {
    title: 'Months',
};
const primaryYAxis = {
    title: 'Rupees against Dollars',
    interval: 5
};
const type = 'Linear';

provide('chart', [ScatterSeries, Trendlines, LineSeries]);
</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



const trendlineSeriesData = [];
const yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
for (let year = 1973, index = 0; year <= 2013; year++, index++) {
  trendlineSeriesData.push({ x: year, y: yValue[index] });
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: trendlineSeriesData,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      type: 'Linear'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Exponential

An exponential trendline displays a curved pattern useful when data rises or falls at increasing rates. Exponential trendlines cannot be generated if the dataset includes zero or negative values.

Set the trendline type to Exponential and inject the TrendLines module using provide.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, SplineSeries, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}


const seriesData = series1;
const primaryXAxis = {
  title: 'Months',
};
const primaryYAxis = {
  title: 'Rupees against Dollars',
  interval: 5
};
const type = 'Exponential';
const title = 'Historical Indian Rupee Rate (INR USD)'

provide('chart', [ScatterSeries, Trendlines, SplineSeries, LineSeries]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, SplineSeries, LineSeries } from "@syncfusion/ej2-vue-charts";



const exponentialSeriesData = [];
const yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
for (let year = 1973, index = 0; year <= 2013; year++, index++) {
  exponentialSeriesData.push({ x: year, y: yValue[index] });
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: exponentialSeriesData,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      type: 'Exponential',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, SplineSeries, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Logarithmic

A logarithmic trendline is a best‑fit curved line suitable when the data increases or decreases quickly and then stabilizes. It supports both positive and negative values.

A logarithmic trendline can use negative and/or positive values.

Set type to Logarithmic and inject the TrendLines module using provide.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, SplineSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}


const seriesData = series1;
const primaryXAxis = {
  title: 'Months',
};
const primaryYAxis = {
  title: 'Rupees against Dollars',
  interval: 5
};
const type = 'Logarithmic';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, SplineSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, SplineSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



const logarithmicSeriesData = [];
const yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
for (let year = 1973, index = 0; year <= 2013; year++, index++) {
  logarithmicSeriesData.push({ x: year, y: yValue[index] });
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: logarithmicSeriesData,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      type: 'Logarithmic',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, SplineSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Polynomial

A polynomial trendline is useful when data fluctuates. It uses a curved line that can model more complex datasets.

Set type to Polynomial and inject the TrendLines module using provide. Use polynomialOrder to define the degree of the polynomial.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
                    <e-trendlines>
                        <e-trendline :type='type'>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, SplineSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";


let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}


const seriesData = series1;
const primaryXAxis = {
    title: 'Months',
};
const primaryYAxis = {
    title: 'Rupees against Dollars',
    interval: 5
};
const type = 'Polynomial';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, Trendlines, SplineSeries, LineSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, SplineSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";


const polynomialSeriesData = [];
const yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
for (let year = 1973, index = 0; year <= 2013; year++, index++) {
  polynomialSeriesData.push({ x: year, y: yValue[index] });
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: polynomialSeriesData,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      type: 'Polynomial',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, SplineSeries, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Power

A power trendline is ideal for datasets where measurements increase at a constant rate. It displays a curved line that best fits exponential growth or decay patterns.

Set type to Power and inject the TrendLines module.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, SplineSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";


const seriesData = [
  { x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
  { x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x: 9, y: 490 }, { x: 10, y: 500 }
];
const primaryXAxis = {
  title: 'Months',
};
const primaryYAxis = {
  title: 'Rupees against Dollars',
  interval: 100
};
const type = 'Power';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, SplineSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, SplineSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: [
        { x: 1, y: 10 }, { x: 2, y: 50 }, { x: 3, y: 80 }, { x: 4, y: 110 },
        { x: 5, y: 180 }, { x: 6, y: 220 }, { x: 7, y: 300 }, { x: 8, y: 370 }, { x: 9, y: 490 }, { x: 10, y: 500 }
      ],
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 100
      },
      type: 'Power',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, SplineSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Moving Average

A moving average trendline smooths fluctuations to reveal overall trends more clearly. The period property specifies the number of data points used to calculate each average.

Set type to MovingAverage and inject the TrendLines module using provide.

period property defines the period to find the moving average.

<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}


const seriesData = series1;
const primaryXAxis = {
  title: 'Months',
};
const primaryYAxis = {
  title: 'Rupees against Dollars',
  interval: 5
};
const type = 'MovingAverage';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
  height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: series1,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      type: 'MovingAverage',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Customization of trendline

Customize trendline appearance using the fill property for color and the width property for line thickness.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y' fill='#0066FF'>
                    <e-trendlines>
                        <e-trendline :type='type'>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";


let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1;
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}

const seriesData = series1;
const primaryXAxis = {
    title: 'Months',
};
const primaryYAxis = {
    title: 'Rupees against Dollars',
    interval: 5
};
const type = 'MovingAverage';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y' fill='#0066FF'>
          <e-trendlines>
            <e-trendline :type='type'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1;
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: series1,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      type: 'MovingAverage',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Forecasting

Trendline forecasting extends the existing trendline to estimate future and past values.

Forecasting can be classified into two types as follows

Forward Forecasting
Backward Forecasting

Forward forecasting

The value set for forwardForecast is used to determine the distance moving towards the future trend.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
                    <e-trendlines>
                        <e-trendline :type='type' :forwardForecast='forwardForecast'>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}

const seriesData = series1;
const primaryXAxis = {
    title: 'Months'
};
const primaryYAxis = {
    title: 'Rupees against Dollars',
    interval: 5
};
const forwardForecast = 5;
const type = 'MovingAverage';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type' :forwardForecast='forwardForecast'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: series1,
      primaryXAxis: {
        title: 'Months'
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      forwardForecast: 5,
      type: 'MovingAverage',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Backward forecasting

The value set for the backwardForecast is used to determine the past trends.

<template>
    <div id="app">
        <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
                    <e-trendlines>
                        <e-trendline :type='type' :backwardForecast='backwardForecast'>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}


const seriesData = series1;
const primaryXAxis = {
    title: 'Months',
};
const primaryYAxis = {
    title: 'Rupees against Dollars',
    interval: 5
};
const backwardForecast = 5;
const type = 'MovingAverage';
const title = 'Historical Indian Rupee Rate (INR USD)';

provide('chart', [ScatterSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
  <div id="app">
    <ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
      <e-series-collection>
        <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
          <e-trendlines>
            <e-trendline :type='type' :backwardForecast='backwardForecast'>
            </e-trendline>
          </e-trendlines>
        </e-series>
      </e-series-collection>
    </ejs-chart>
  </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
  13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
  41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
  point1 = { x: i, y: yValue[j] };
  series1.push(point1); j++;
}

export default {
  name: "App",
  components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
      seriesData: series1,
      primaryXAxis: {
        title: 'Months',
      },
      primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
      },
      backwardForecast: 5,
      type: 'MovingAverage',
      title: 'Historical Indian Rupee Rate (INR USD)'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
#container {
  height: 350px;
}
</style>

Show or hide a trendline

You can show or hide the trendline by setting trendline visible property.

<template>
    <div id="app">
        <ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
                    <e-trendlines>
                        <e-trendline :type='type' :visible=false>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script setup>
import { provide } from "vue";

import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";



let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}

const seriesData = series1;
const primaryXAxis = {
    title: 'Months',
};
const primaryYAxis = {
    title: 'Rupees against Dollars',
    interval: 5
};
const type = 'Linear';

provide('chart', [ScatterSeries, Trendlines, LineSeries]);

</script>
<style>
#container {
    height: 350px;
}
</style>
<template>
    <div id="app">
         <ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
            <e-series-collection>
                <e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y'>
                 <e-trendlines>
                        <e-trendline :type='type' :visible=false>
                        </e-trendline>
                    </e-trendlines>
                </e-series>
            </e-series-collection>
        </ejs-chart>
    </div>
</template>
<script>

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries } from "@syncfusion/ej2-vue-charts";

let series1 = [];
let yValue = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95,
    13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point1; let i; let j = 0;
for (i = 1973; i <= 2013; i++) {
    point1 = { x: i, y: yValue[j] };
    series1.push(point1); j++;
}

export default {
name: "App",
components: {
    "ejs-chart": ChartComponent,
    "e-series-collection": SeriesCollectionDirective,
    "e-series": SeriesDirective,
    "e-trendlines": TrendlinesDirective,
    "e-trendline": TrendlineDirective
  },
  data() {
    return {
        seriesData: series1,
        primaryXAxis: {
        title: 'Months',
        },
        primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
        },
        type: 'Linear'
    };
  },
  provide: {
    chart: [ScatterSeries, Trendlines, LineSeries]
  }
};
</script>
<style>
 #container{
   height: 350px;
 }
</style>