To render a line series, use series type as Line and
inject LineSeries module using Chart.Inject(LineSeries) method.
import { Chart, LineSeries } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries);
let chartData: any[] = [
{ x: 2005, y: 28 }, { x: 2006, y: 25 },{ x: 2007, y: 26 }, { x: 2008, y: 27 },
{ x: 2009, y: 32 }, { x: 2010, y: 35 }, { x: 2011, y: 30 }
];
let chart: Chart = new Chart({
series:[{
dataSource: chartData,
xName: 'x', yName: 'y',
//Series type as line
type: 'Line'
}],
}, '#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>To render a multicolored line series, use the series type as MultiColoredLine, and inject the MultiColoredLineSeries module using Chart.Inject(MultiColoredLineSeries) method. Here, the individual colors to the data can be mapped by using pointColorMapping.
import { Chart, MultiColoredLineSeries } from '@syncfusion/ej2-charts';
Chart.Inject(MultiColoredLineSeries);
let chart: Chart = new Chart({
series:[{
dataSource: [{ x: 2005, y: 28 , color: 'red'}, { x: 2006, y: 25, color:'green'}, { x: 2007, y: 26, color: '#ff0097' }, { x: 2008, y: 27, color: 'crimson' }, { x: 2009, y: 32, color: 'blue' }, { x: 2010, y: 35 ,color: 'darkorange'}],
xName: 'x', yName: 'y', pointColorMapping: 'color',
type: 'MultiColoredLine'
}],
}, '#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>The following properties can be used to customize the line series.
fill – Specifies the color of the series.opacity – Specifies the opacity of fill.dashArray – Specifies the dashes for series.width – Specifies the width for series.import { Chart, LineSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(LineSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
//fill for chart series
fill: 'red',
//line width as 4 for chart series
width:4,
//dash array value as 5,5
dashArray: '5,5',
xName: 'x', yName: 'y',
type: 'Line'
}],
}, '#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Animation</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>