Sparkline types in EJ2 TypeScript Sparkline control
18 Apr 202318 minutes to read
Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types:
- Line
- Column
- Win-Loss
- Pie
- Area
The following code sample shows different types of sparklines.
Line
The [Line
] type is used to render the sparkline series as line.
import { Sparkline, SparklineTooltip } from '@syncfusion/ej2-charts';
Sparkline.Inject(SparklineTooltip);
let sparkline: Sparkline = new Sparkline({
height: '100px',
width: '70%',
dataSource: [
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: 20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: 21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: 22262500 },
{ x: 9, xval: '2014', yval: 22507620 },
],
// Assign the dataSource values to series of sparkline 'xName and yName'
xName: 'xval', yName: 'yval',
// Assign 'Line' as type of the sparkline
type:'Line'
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>
Column
The [Column
] type is used to render the sparkline series as column.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '150px',
width: '200px',
dataSource: [
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: 20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: 21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: 22262500 },
{ x: 9, xval: '2014', yval: 22507620 },
],
// Assign the dataSource values to series of sparkline 'xName and yName'
xName: 'xval', yName: 'yval',
// Assign 'Column' as type of the sparkline
type:'Column'
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>
Pie
The [Pie
] type is used to render the sparkline series as pie.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '200px',
width: '70%',
dataSource: [
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: 20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: 21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: 22262500 },
{ x: 9, xval: '2014', yval: 22507620 },
],
// Assign the dataSource values to series of sparkline 'xName and yName'
xName: 'xval', yName: 'yval',
// Assign 'Pie' as type of the sparkline
type:'Pie'
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>
WinLoss
The [WinLoss
] type is used to render the sparkline series as WinLoss.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '100px',
width: '70%',
dataSource: [
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: -20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: -21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: -22262500 },
{ x: 9, xval: '2014', yval: 22507620 },
],
// Assign the dataSource values to series of sparkline 'xName and yName'
xName: 'xval', yName: 'yval',
// Assign 'WinLoss' as type of the sparkline
type:'WinLoss'
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>
Area
The [Area
] type is used to render the sparkline series as area.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '100px',
width: '70%',
dataSource: [
{ x: 0, xval: '2005', yval: 20090440 },
{ x: 1, xval: '2006', yval: 20264080 },
{ x: 2, xval: '2007', yval: 20434180 },
{ x: 3, xval: '2008', yval: 21007310 },
{ x: 4, xval: '2009', yval: 21262640 },
{ x: 5, xval: '2010', yval: 21515750 },
{ x: 6, xval: '2011', yval: 21766710 },
{ x: 7, xval: '2012', yval: 22015580 },
{ x: 8, xval: '2013', yval: 22262500 },
{ x: 9, xval: '2014', yval: 22507620 },
],
// Assign the dataSource values to series of sparkline 'xName and yName'
xName: 'xval', yName: 'yval',
// Assign 'Area' as type of the sparkline
type:'Area'
});
sparkline.appendTo("#element");
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 for Sparkline </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for Sparkline UI Control" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-charts/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="margin-top: 15%;">
<div id="element" align="center" ></div>
</div>
</body>
</html>