Essential JS 2 Chart chart supports 32 types of series.
Line
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>
Step Line
To render a step line series, use series type
as StepLine
and
inject StepLineSeries
module using Chart.Inject(StepLineSeries)
method.
import { Chart, StepLineSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(StepLineSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
// Series type as StepLine
type: 'StepLine'
}],
}, '#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>
Stacked Line
To render a stacked line series, use series type
as
StackingLine
and inject StackingLineSeries
module
using Chart.Inject(StackingLineSeries)
method.
import { Chart, Category, Legend, Tooltip, StackingLineSeries } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
Chart.Inject(StackingLineSeries, Category, Legend, Tooltip);
/**
* Sample for StackedLine Series
*/
let chartData: Object[] = [
{ x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
{ x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
{ x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
{ x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
{ x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
{ x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
{ x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
{ x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
{ x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
{ x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
{ x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
{ x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
];
let chart: Chart = new Chart({
//Initializing Primary X Axis
primaryXAxis: {
interval: 1, valueType: 'Category'
},
//Initializing Primary Y Axis
primaryYAxis:
{
title: 'Expense',
interval: 100,
labelFormat: '${value}',
},
chartArea: { border: { width: 0 } },
//Initializing Chart Series
series: [
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John'
},
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter'
},
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve'
},
{
type: 'StackingLine', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle'
}
],
//Initializing User Interaction Tooltip
tooltip: {
enable: true
},
});
}, '#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>
100% Stacked Line
To render a 100% stacked line series, use series type
as
StackingLine100
and inject StackingLineSeries
module using Chart.Inject(StackingLineSeries)
method.
import { Chart, Category, Legend, Tooltip, StackingLineSeries } from '@syncfusion/ej2-charts';
import { Browser } from '@syncfusion/ej2-base';
Chart.Inject(StackingLineSeries, Category, Legend, Tooltip);
/**
* Sample for StackedLine Series
*/
let chartData: Object[] = [
{ x: 'Food', y: 90, y1: 40, y2: 70, y3: 120 },
{ x: 'Transport', y: 80, y1: 90, y2: 110, y3: 70 },
{ x: 'Medical', y: 50, y1: 80, y2: 120, y3: 50 },
{ x: 'Clothes', y: 70, y1: 30, y2: 60, y3: 180 },
{ x: 'Personal Care', y: 30, y1: 80, y2: 80, y3: 30 },
{ x: 'Books', y: 10, y1: 40, y2: 30, y3: 270 },
{ x: 'Fitness', y: 100, y1: 30, y2: 70, y3: 40 },
{ x: 'Electricity', y: 55, y1: 95, y2: 55, y3: 75 },
{ x: 'Tax', y: 20, y1: 50, y2: 40, y3: 65 },
{ x: 'Pet Care', y: 40, y1: 20, y2: 80, y3: 95 },
{ x: 'Education', y: 45, y1: 15, y2: 45, y3: 195 },
{ x: 'Entertainment', y: 75, y1: 45, y2: 65, y3: 115 }
];
let chart: Chart = new Chart({
primaryXAxis: {
interval: 1, valueType: 'Category'
},
primaryYAxis:
{
interval: 20
},
chartArea: { border: { width: 0 } },
series: [
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y', name: 'John'
},
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y1', name: 'Peter'
},
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y2', name: 'Steve'
},
{
type: 'StackingLine100', dataSource: chartData, marker: { visible: true },
dashArray: '5, 1', xName: 'x', width: 2, yName: 'y3', name: 'Charle'
}
],
tooltip: {
enable: true,
format: '${point.x} : <b>${point.y} (${point.percentage}%)</b>'
},
});
}, '#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>
Spline
To render a spline series, use series type
as Spline
and
inject SplineSeries
module using Chart.Inject(SplineSeries)
method.
import { Chart, SplineSeries, Category } from '@syncfusion/ej2-charts';
import { polarCategory } from './datasource.ts';
Chart.Inject(SplineSeries, Category);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series:[{
dataSource: polarCategory,
xName: 'x', yName: 'y',
// Series type as spline series
type: 'Spline'
}],
}, '#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>
Spline Area
To render a spline area series, use series type
as SplineArea
and
inject SplineAreaSeries
module using Chart.Inject(SplineAreaSeries)
method.
import { Chart, SplineAreaSeries, Category } from '@syncfusion/ej2-charts';
import { polarCategory } from './datasource.ts';
Chart.Inject(SplineAreaSeries, Category);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series:[{
dataSource: polarCategory,
xName: 'x', yName: 'y',
// Series type as SplineArea
type: 'SplineArea'
}],
}, '#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>
Multicolored Line
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>
Customization of Line Chart
stroke
, stroke-width
and dashArray
of all line type series can be customized by using
fill
, width
and
dashArray
properties.
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>
Area
To render a area series, use series type
as Area
and inject
AreaSeries
module using Chart.Inject(AreaSeries)
method.
import { Chart, AreaSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(AreaSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
// Series type as area series
type: 'Area'
}],
}, '#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>
Range Area
To render a range area series, use series type
as RangeArea
and inject RangeAreaSeries
module using Chart.Inject(RangeAreaSeries)
method.
Since the RangeArea series requires two y values for a point, you have to add the high and low value. High and Low value specifies the maximum and minimum range of the points.
import { Chart, RangeAreaSeries, DateTime } from '@syncfusion/ej2-charts';
Chart.Inject(RangeAreaSeries, DateTime);
let series: Object[] = [];
let value: number = 70;
let point: Object;
for (let i: number = 1; i < 70; i++) {
if (Math.random() > .5) {
value += Math.random();
} else {
value -= Math.random();
}
point = { x: new Date(1930 + i, 5, i), high: value, low: value - 25 };
series.push(point);
}
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'DateTime',
},
series: [
{
type: 'RangeArea',
dataSource: series,
xName: 'x', high: 'high', low: 'low',
}],
}, '#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>
Stacked Area
To render a stacked area series, use series type
as StackingArea
and inject StackingAreaSeries
module
using Chart.Inject(StackingAreaSeries)
method.
import { Chart, StackingAreaSeries, DateTime } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingAreaSeries, DateTime);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
//Series type as stacked area series
type: 'StackingArea',
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type: 'StackingArea',
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type: 'StackingArea',
}
],
}, '#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>
100% Stacked Area
To render a 100% stacked area series, use series type
as StackingArea100
and inject StackingAreaSeries
module using Chart.Inject(StackingAreaSeries)
method.
import { Chart, StackingAreaSeries, DateTime } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingAreaSeries, DateTime);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
//Series type as 100% stacked area series
type: 'StackingArea100',
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type: 'StackingArea100',
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type: 'StackingArea100',
}
],
}, '#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>
Step Area
To render a step area series, use series type
as StepArea
and inject StepAreaSeries
module using Chart.Inject(StepAreaSeries)
method.
import { Chart, StepAreaSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(StepAreaSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
type: 'StepArea'
}],
}, '#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>
Stacked Step Area
To render a stacked step area series, use series type
as StackingStepArea
and inject StackingStepAreaSeries
module using Chart.Inject(StackingStepAreaSeries)
method.
import { Chart, StackingStepAreaSeries } from '@syncfusion/ej2-charts';
Chart.Inject(StackingStepAreaSeries);
let chart: Chart = new Chart({
series:[
{
dataSource: [{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 },
{ x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 },
{ x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }],
xName: 'x', yName: 'y',
type: 'StackingStepArea'
},
{
dataSource: [{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 },
{ x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 },
{ x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }],
xName: 'x', yName: 'y',
type: 'StackingStepArea'
}
],
}, '#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>
Multicolored area
To render a multicolored area series, use the series type as MultiColoredArea
, and inject the MultiColoredAreaSeries
module using Chart.Inject(MultiColoredAreaSeries)
method. The required segments
of the series can be customized using the value
, color
, and dashArray
.
import { Chart, MultiColoredAreaSeries } from '@syncfusion/ej2-charts';
Chart.Inject(MultiColoredAreaSeries);
let chart: Chart = new Chart({
series:[{
dataSource: [{ 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: 25 }],
xName: 'x', yName: 'y',
type: 'MultiColoredArea',
segmentAxis: 'X',
segments: [{
value: 2007,
color: 'blue'
}, {
value: 2009,
color: 'lightgreen'
}, {
color: 'orange'
}],
}],
}, '#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>
Customization of Area Series
fill
, border
and dashArray
of all area type series can be customized
using fill
,
border
and dashArray
properties.
import { Chart, AreaSeries } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(AreaSeries);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
fill:'#69D2E7',
border:{width:2, color:'Red'},
dashArray: '5,5',
name: 'Product A',
type: 'Area'
}],
}, '#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>
Column
To render a column series, use series type
as Column
and
inject ColumnSeries
module using Chart.Inject(ColumnSeries)
method.
import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
},
series:[{
dataSource: columnData,
xName: 'country', yName: 'gold',
// Series type as column series
type: 'Column'
}],
}, '#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>
Stacked Column
To render a stacked column series, use series type
as
StackingColumn
and inject StackingColumnSeries
module
using Chart.Inject(StackingColumnSeries)
method.
import { Chart, StackingColumnSeries, Category } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingColumnSeries, Category);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
//Series type as stacked column
type: 'StackingColumn'
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type: 'StackingColumn'
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type: 'StackingColumn'
}
],
}, '#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>
100% Stacked Column
To render a 100% stacked column series, use series type
as
StackingColumn100
and inject StackingColumnSeries
module using Chart.Inject(StackingColumnSeries)
method.
import { Chart, StackingColumnSeries, DateTime } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingColumnSeries, DateTime);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
//Series type as 100% stacked column series
type: 'StackingColumn100'
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type: 'StackingColumn100'
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type: 'StackingColumn100'
}
],
}, '#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>
Range Column
To render a range column series, use series type
as RangeColumn
and inject RangeColumnSeries
module
using Chart.Inject(RangeColumnSeries)
method.
import { Chart, RangeColumnSeries, Category } from '@syncfusion/ej2-charts';
Chart.Inject(RangeColumnSeries, Category);
let data: any[] = [
{ x: 'Jan', low: 0.7, high: 6.1 }, { x: 'Feb', low: 1.3, high: 6.3 }, { x: 'Mar', low: 1.9, high: 8.5 },
{ x: 'Apr', low: 3.1, high: 10.8 }, { x: 'May', low: 5.7, high: 14.40 }, { x: 'Jun', low: 8.4, high: 16.90 },
{ x: 'Jul', low: 10.6,high: 19.20 }, { x: 'Aug', low: 10.5,high: 18.9 }, { x: 'Sep', low: 8.5, high: 16.1 },
{ x: 'Oct', low: 6.0, high: 12.5 }, { x: 'Nov', low: 1.5, high: 6.9 }, { x: 'Dec', low: 5.1, high: 12.1 }
];
let data2: any[] = [
{ x: 'Jan', low: 1.7, high: 7.1 }, { x: 'Feb', low: 1.9, high: 7.7 }, { x: 'Mar', low: 1.2, high: 7.5 },
{ x: 'Apr', low: 2.5, high: 9.8 }, { x: 'May', low: 4.7, high: 11.4 }, { x: 'Jun', low: 6.4, high: 14.4 },
{ x: 'Jul', low: 9.6, high: 17.2 }, { x: 'Aug', low: 10.7, high: 17.9 }, { x: 'Sep', low: 7.5, high: 15.1 },
{ x: 'Oct', low: 3.0, high: 10.5 }, { x: 'Nov', low: 1.2, high: 7.9 }, { x: 'Dec', low: 4.1, high: 9.1 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category'
},
series: [
{
// Series type as range column series
type: 'RangeColumn',
dataSource: data, xName: 'x', high: 'high', low: 'low',
}, {
type: 'RangeColumn',
dataSource: data2, xName: 'x', high: 'high', low: 'low',
}
],
}, '#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>
Customization of Column
fill
, border
and dashArray
of all column type series can be
customized using fill
, border
and dashArray
properties.
import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
import { columnData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
},
series:[{
dataSource: columnData,
xName: 'country', yName: 'gold',
//fill for column series
fill: 'green',
//border width and color for column series
border: {
width: '2',
color: 'red'
},
//dash array for the series
dashArray: '5,3',
//series type as column series
type: 'Column'
}],
}, '#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>
Stacking Group
You can use the stackingGroup
property to group the stacked columns and 100% stacked columns.
Columns with same group name are stacked on top of each other.
import { Chart, StackingColumnSeries, Category } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingColumnSeries, Category);
let chart: Chart = new Chart({
series: [
{
dataSource: stackedData, xName: 'x', yName: 'y',
type: 'StackingColumn'
//Stacking group for stacked column series
stackingGroup: 'UKAndGermany'
}, {
dataSource: stackedData, xName: 'x', yName: 'y1',
type: 'StackingColumn', stackingGroup: 'UKAndGermany'
}, {
dataSource: stackedData, xName: 'x', yName: 'y2',
type: 'StackingColumn', stackingGroup: 'FranceAndItaly'
}
],
}, '#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>
Bar
To render a bar series, use series type
as Bar
and inject
BarSeries
module using Chart.Inject(BarSeries)
method.
import { Chart, BarSeries, Category } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(BarSeries, Category);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
// Series type as bar series
type: 'Bar'
}],
}, '#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>
Stacked bar
To render a stacked bar series, use series type
as StackingBar
and inject StackingBarSeries
module
using Chart.Inject(StackingBarSeries)
method.
import { Chart, StackingBarSeries, Category } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingBarSeries, Category);
let chart: Chart = new Chart({
series: [
{
//Series type as stacked bar
type: 'StackingBar',
dataSource: stackedData, xName: 'x', yName: 'y'
}, {
type: 'StackingBar',
dataSource: stackedData, xName: 'x', yName: 'y1'
}, {
type: 'StackingBar',
dataSource: stackedData, xName: 'x', yName: 'y2'
}
],
}, '#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>
100% Stacked Bar
To render a 100% stacked bar series, use series type
as
StackingBar100
and inject StackingBarSeries
module using Chart.Inject(StackingBarSeries)
method.
import { Chart, StackingBarSeries, Category } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingBarSeries, Category);
let chart: Chart = new Chart({
series: [
{
//Series type as 100% stacked bar
type: 'StackingBar100',
dataSource: stackedData, xName: 'x', yName: 'y'
}, {
type: 'StackingBar100',
dataSource: stackedData, xName: 'x', yName: 'y1'
}, {
type: 'StackingBar100',
dataSource: stackedData, xName: 'x', yName: 'y2'
}
],
}, '#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>
Customization of Bar Series
fill
, border
and dashArray
of all bar type series can be
customized using fill
, border
and dashArray
properties.
import { Chart, BarSeries, Category } from '@syncfusion/ej2-charts';
import { numData } from './datasource.ts';
Chart.Inject(BarSeries, Category);
let chart: Chart = new Chart({
series:[{
dataSource: numData,
xName: 'x', yName: 'y',
//fill for bar series
fill: 'green',
//border for bar series
border: {
width: 2,
color: 'red'
},
//dashArray for bar series
dashArray: '5,3',
// series type as bar series
type: 'Bar'
}],
}, '#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>
Stacking Group
You can use the stackingGroup
property to group the stacked bar and 100% stacked bar.
Columns with same group name are stacked on top of each other.
import { Chart, StackingBarSeries } from '@syncfusion/ej2-charts';
import { stackedData } from './datasource.ts';
Chart.Inject(StackingBarSeries);
let chart: Chart = new Chart({
series: [
{
type: 'StackingBar',
//Stacking group for stacked bar
stackingGroup: 'JohnAndAndrew',
dataSource: stackedData, xName: 'x', yName: 'y'
}, {
type: 'StackingBar', name: 'Andrew', stackingGroup: 'JohnAndAndrew',
dataSource: stackedData, xName: 'x', yName: 'y1'
}, {
type: 'StackingBar', name: 'Thomas', stackingGroup: 'ThomasAndMichael',
dataSource: stackedData, xName: 'x', yName: 'y2'
}
],
}, '#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 scatter series, use series type
as Scatter
and
inject ScatterSeries
module using Chart.Inject(ScatterSeries)
method.
import { Chart, ScatterSeries, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ScatterSeries, Legend);
let series1: Object[] = [];
let series2: Object[] = [];
let point1: Object;
let value: number = 80;
let value1: number = 70;
let i: number;
for (i = 1; i < 50; i++) {
if (Math.random() > 0.5) {
value += Math.random();
} else {
value -= Math.random();
}
value = value < 60 ? 60 : value > 90 ? 90 : value;
point1 = { x: 120 + (i / 2), y: value.toFixed(1) };
series1.push(point1);
}
for (i = 1; i < 50; i++) {
if (Math.random() > 0.5) {
value1 += Math.random();
} else {
value1 -= Math.random();
}
value1 = value1 < 60 ? 60 : value1 > 90 ? 90 : value1;
point1 = { x: 120 + (i / 2), y: value1.toFixed(1) };
series2.push(point1);
}
let chart: Chart = new Chart({
series: [
{
//Series type as scatter
type: 'Scatter',
dataSource: series1, xName: 'x', yName: 'y',
}, {
type: 'Scatter',
dataSource: series2, xName: 'x', yName: 'y',
}
],
}, '#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 bubble series, use series type
as Bubble
and
inject BubbleSeries
module using Chart.Inject(BubbleSeries)
method.
import { Chart, BubbleSeries} from '@syncfusion/ej2-charts';
import { EmitType } from '@syncfusion/ej2-base';
Chart.Inject(BubbleSeries);
let chart: Chart = new Chart({
series: [
{
type: 'Bubble',
dataSource: [{ x: 92.2, y: 7.8, size: 1.347, text: 'China' },
{ x: 74, y: 6.5, size: 1.241, text: 'India' },
{ x: 90.4, y: 6.0, size: 0.238, text: 'Indonesia' },
{ x: 99.4, y: 2.2, size: 0.312, text: 'US' },
{ x: 88.6, y: 1.3, size: 0.197, text: 'Brazil' },
{ x: 99, y: 0.7, size: 0.0818, text: 'Germany' },
{ x: 72, y: 2.0, size: 0.0826, text: 'Egypt' },
{ x: 99.6, y: 3.4, size: 0.143, text: 'Russia' },
{ x: 99, y: 0.2, size: 0.128, text: 'Japan' },
{ x: 86.1, y: 4.0, size: 0.115, text: 'Mexico' },
{ x: 92.6, y: 6.6, size: 0.096, text: 'Philippines' },
{ x: 61.3, y: 14.5, size: 0.162, text: 'Nigeria' }],
xName: 'x', yName: 'y', size: 'size',
},
],
}, '#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>
Bubble Size Mapping
size
property can be used to map the size value specified in data source.
import { Chart, BubbleSeries} from '@syncfusion/ej2-charts';
import { bubbleData } from './datasource.ts';
import { EmitType } from '@syncfusion/ej2-base';
Chart.Inject(BubbleSeries);
let chart: Chart = new Chart({
series: [
{
type: 'Bubble',
dataSource: bubbleData,
xName: 'x', yName: 'y',
//size property used to map size values from data source
size: 'size',
},
],
}, '#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>