Marker in EJ2 TypeScript Sparkline control
18 Apr 20237 minutes to read
This section explains how to add markers to the sparklines.
Adding marker to the sparkline
To add marker to the sparkline, specify the visible
of markerSettings
as following values. The visible
will accept multiple values too.
- All - Enables markers for all points.
- Start - Enables marker for the start point.
- End - Enables marker for the end point.
- High - Enables marker for the high point.
- Low - Enables marker for the low point.
- Negative - Enables markers for the negative points.
The following code example shows enabling markers for all points.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '200px',
width: '350px',
axisSettings: {
minX: -1, maxX: 7, maxY: 7, minY: -1
},
dataSource: [0, 6, 4, 1, 3, 2, 5],
// To enable markers for all points
markerSettings: {
visible: ['All']
}
});
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/27.2.2/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>
Adding marker to special point
In sparkline, markers can be enabled for particular points such as the start, end, low, high, or negative. The following code examples shows enabling markers for the high and low points.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '200px',
width: '350px',
axisSettings: {
minX: -1, maxX: 7, maxY: 7, minY: -1
},
dataSource: [3, 6, 4, 1, 3, 2, 5],
// To enable marker for high and low points with color customization
highPointColor: 'blue',
lowPointColor: 'red',
markerSettings: {
visible: ['High', 'Low']
}
});
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/27.2.2/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>
Customizing markers
Sparkline markers can be customized in terms of fill color, border color, width, opacity, and size. The following code example shows customizing marker’s fill, border, and size.
import { Sparkline } from '@syncfusion/ej2-charts';
let sparkline: Sparkline = new Sparkline({
height: '200px',
width: '350px',
axisSettings: {
minX: -1, maxX: 7, maxY: 7, minY: -1
},
dataSource: [3, 6, 4, 1, 3, 2, 5],
// To enable marker for high and low points with color customization
fill: 'blue',
markerSettings: {
visible: ['All'],
size: 5, fill: 'white', border: { color: 'blue', width: 2}
}
});
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/27.2.2/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>