How can I help you?
Trend lines in React 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 Chart.Inject(Trendlines).
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Exponential' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Exponential' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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.
Set type to Logarithmic and inject the Trendlines module.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Logarithmic' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Logarithmic' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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. Use polynomialOrder to define the degree of the polynomial.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Polynomial' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Polynomial' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
import { powerData } from './datasource';
function App() {
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 50,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={powerData} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Power' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
import { powerData } from './datasource';
function App() {
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 50,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={powerData} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Power' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let powerData = [
{ 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 }
];export let powerData: Object[] = [
{ 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 }
];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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='MovingAverage' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='MovingAverage' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Customization of Trendline
Customize trendline appearance using the fill property for color and the width property for line thickness.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' fill='red' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' fill='red' width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Forecasting
Trendline forecasting extends the existing trendline to estimate future and past values.
Forward Forecasting
Use the forwardForecast property to extend the trendline into the future.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' backwardForecast={5} width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' backwardForecast={5} width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Backward Forecasting
Use the backwardForecast property to extend the trendline into past data points.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' backwardForecast={5} width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' backwardForecast={5} width={3} marker={marker}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));Show or hide a trendline
Control visibility using the visible property of the trendline.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} tooltip={tooltip} chartArea={chartarea} title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' visible={false}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { Browser } from '@syncfusion/ej2-base';
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject,
Tooltip, LineSeries, ScatterSeries, SplineSeries, Trendlines, Category, ChartTheme
,AxisModel,TooltipSettingsModel,ChartAreaModel
} from '@syncfusion/ej2-react-charts';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { SampleBase } from '../common/sample-base';
import { PropertyPane } from '../common/property-pane';
import { EmitType } from '@syncfusion/ej2-base';
function App() {
const series1: Object[] = [];
const yValue: number[] = [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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months', majorGridLines: { width: 0 } };
const primaryyAxis: AxisModel = {
title: 'Rupees against Dollars', interval: 10,
lineStyle: { width: 0 }, majorTickLines: { width: 0 }
};
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const marker = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Category, Tooltip, ScatterSeries, SplineSeries, LineSeries, Trendlines]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' visible={false} >
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));