Trend lines in Vue Chart component
13 Jun 202424 minutes to read
Trendlines are used to show the direction and speed of price.
Trendlines can be generated for Cartesian type series (Line, Column, Scatter, Area, Candle, Hilo etc.)
except bar type series. You can add more than one trendline to a series.
Chart supports 6 types of trendlines.
Linear
A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear trendline, use trendline type
as Linear
and inject 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";
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>
Exponential
An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. You cannot create an exponential trendline, if your data contains zero or negative values.
To render a exponential trendline, use trendline type
as Exponential
and inject 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";
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: '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 that is most useful when the rate of change in the data increases or decreases quickly and then levels out.
A logarithmic trendline can use negative and/or positive values.
To render a logarithmic trendline, use trendline type
as Logarithmic
and inject 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";
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: '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 a curved line that is used when data fluctuates.
To render a polynomial trendline, use trendline type
as Polynomial
and inject TrendLines
module using provide
.
polynomialOrder
used to define the polynomial value.
<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";
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: '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 a curved line that is best used with data sets that compare measurements that increase at a specific rate.
To render a power trendline, use trendline type
as Power
and inject
TrendLines
.
<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 smoothen out fluctuations in data to show a pattern or trend more clearly.
To render a moving average trendline, use trendline type
as MovingAverage
and inject 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 Trendlines
The fill
and width
properties are used to customize the appearance of the trendline.
<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
Trendlines forecasting is the prediction of future/past situations.
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>