Pointers are used to indicate values on the axis. Value of the pointer can be modified using the value
property.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 80
}]
}]
}, '#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 Linear Gauge supports the following two types of pointers:
You can choose any one of the pointer by using type
property.
A marker pointer is a shape, that can be placed to mark the pointer value in the linear gauge.
Types of marker shapes
The following marker types are available in linear gauge. You can change the marker shape using markerType
property in pointer
options. The available marker types are,
You can also use image instead of rendering shape as pointer. It can be achieved by using markerType
property as Image
set image path to ‘imageUrl’ in pointer
.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 80,
type: 'Marker',
markerType: 'Circle'
}]
}]
}, '#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>
Marker Pointer Customization
The marker can be customized by using the following properties.
height
- Specifies pointer heightwidth
- Specifies pointer widthcolor
- Specifies pointer colorplacement
- Specifies pointer placement position, available placement options are ‘Near’, ‘Far’, ‘Center’ and ‘None’offset
- Specifies offset value from it default position.animationDuration
- Specifies pointer animation durationborder
- Specifies pointer border color and widthimport { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 80,
markerType: 'Circle',
height: 15,
width: 15,
color: '#cd41f4'
}]
}]
}, '#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 pointer is used to track the axis value and it will render depending upon the container type. Bar pointer starts from the beginning of the gauge and ends at the pointer value.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 60,
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>
Bar pointer customization
The bar pointer can be customized using following properties.
width
- Specifies bar pointer widthcolor
- Specifies bar pointer coloroffset
- Helps to move the bar pointer from its default position.border
- Specifies bar pointer border width and colorplacement
property is not supported for bar pointer.import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 60,
type: 'Bar',
width: 20,
color: '#f44141'
}]
}]
}, '#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>
You can placement the marker pointer in any of the following locations using [placement
] property.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 60,
markerType: 'Arrow'
color: '#cd41f4',
placement: 'Near'
}]
}]
}, '#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>
In addition to the default pointer, you can add n number of pointer to an axis.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [
{
value: 80
},
{
value: 60,
markerType: 'Circle'
},
{
value: 30,
markerType: 'Diamond'
}
]
}]
}, '#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>
Pointer will animate on loading the gauge. This can be handled by using
animationDuration
property. You need to specify the duration of the animation in milliseconds.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
pointers: [{
value: 60,
animationDuration: 1000
}]
}]
}, '#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>
Gradient support allows to add multiple colors in the ranges and pointers of the circular gauge. The following gradient types are supported in the linear gauge.
Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the startValue
property. The end value of the linear gradient will be set using the endValue
property. The color stop values such as color, opacity and offset are set using colorStop
property.
The linear gradient can be applied to all pointer types like marker and range bar. To do so, follow the below code sample.
import { LinearGauge, Gradient } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Gradient);
let gauge: LinearGauge = new LinearGauge({
orientation: 'Horizontal',
container: {
width: 30, offset: 30
},
axes: [{
line: { width: 0 },
majorTicks: { height: 0, interval: 25 },
minorTicks: { height: 0 },
labelStyle: {
font: { color: '#424242',
}, offset: 55
},
pointers: [{
value: 80, height: 25,
width: 35, placement: 'Near',
offset: -44, markerType: 'Triangle',
color : '#f54ea2',
linearGradient: {
startValue: '0%',
endValue: '100%',
colorStop: [
{ color: '#fef3f9', offset: '0%', opacity: 1 },
{ color: '#f54ea2', offset: '100%', opacity: 1 }]
}
}],
ranges: [{
start: 0, end: 80,
startWidth: 30, endWidth: 30,
color: '#f54ea2', offset: 30,
}]
}]
}, '#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>
Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the innerPosition
property. The outer circle position of the radial gradient can be set using the outerPosition
property. The color stop values such as color, opacity and offset are set using colorStop
property.
The radial gradient can be applied to all pointer types like marker and rangeBar. To do so, follow the below code sample.
import { LinearGauge, Gradient } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Gradient);
let gauge: LinearGauge = new LinearGauge({
orientation: 'Horizontal',
container: {
width: 30, offset: 30
},
axes: [{
line: { width: 0 },
majorTicks: { height: 0, interval: 25 },
minorTicks: { height: 0 },
labelStyle: {
font: { color: '#424242',
}, offset: 55
},
pointers: [{
value: 80, height: 25,
width: 35, placement: 'Near',
offset: -44, markerType: 'Triangle',
color : '#f54ea2',
radialGradient: {
radius: '60%',
outerPosition: { x: '50%', y: '50%' },
innerPosition: { x: '50%', y: '50%' },
colorStop: [
{ color: '#fff5f5', offset: '0%', opacity: 0.9 },
{ color: '#f54ea2', offset: '100%', opacity: 0.8 }]
}
}],
ranges: [{
start: 0, end: 80,
startWidth: 30, endWidth: 30,
color: '#f54ea2', offset: 30,
}]
}]
}, '#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>