This section explains you the steps to create a simple Linear Gauge and demonstrates the basic usage of the Linear Gauge component.
Following is the list of minimum dependencies required to use the Linear Gauge.
|-- @syncfusion/ej2-lineargauge
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-pdf-export
|-- @syncfusion/ej2-svg-base
GitHub
and install the necessary npm packages by using the following commands.git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install
Syncfusion Linear Gauge packages can be mapped in the system.config.js configuration file.
System.config({
paths: {
'syncfusion:': './node_modules/@syncfusion/',
},
map: {
app: 'app',
//Syncfusion packages mapping
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
"@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
"@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
"@syncfusion/ej2-lineargauge": "syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js",
},
packages: {
'app': { main: 'app', defaultExtension: 'js' }
}
});
The project is preconfigured with common settings (
system.config.js
) to start with all Essential JS 2 components.
The Essential JS2 Linear Gauge component can be added to the application. To get started, add the Linear Gauge component to the app.ts and index.html files using the following code.
Add an HTML div element to act as the Linear Gauge element in the index.html file using the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Linear gauge</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" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<!-- container which is going to render the linear gauge -->
<div id='container'>
</div>
</body>
</html>
Import the LinearGauge component in the app.ts file to initialize the Linear Gauge and append the Linear Gauge instance to the #container
.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
// initialize linear gauge component
let gauge: LinearGauge = new LinearGauge();
// render initialized linear gauge
gauge.appendTo('#container');
The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.
npm start
The below example shows a basic Linear Gauge component.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge();
gauge.appendTo('#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" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
Linear Gauge component is segregated into individual feature-wise modules. In order to use a particular feature, inject its corresponding feature module using LinearGauge.Inject() method. Please find the feature module name and description as follows.
Now import the above mentioned modules from the Linear Gauge package and inject it into the LinearGauge component using LinearGauge.Inject method.
import { GaugeTooltip, Annotations } from '@syncfusion/ej2-lineargauge';
LinearGauge.Inject(Annotations, GaugeTooltip);
The title can be added to the Linear Gauge component using the title
property in the Linear Gauge.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
// Title for linear gauge
title: 'linear gauge'
}, '#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" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
The range of the axis can be set using the minimum
and maximum
properties in the Linear Gauge.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
minimum: 0,
maximum: 200
}]
}, '#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" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
To denote the axis values with temperature units, add the °C as suffix to each label. This can be achieved by setting the {value}°C to the format
property in the labelStyle
object of the axis. Here, {value} acts as a placeholder for each axis label.
To change the pointer value from the default value of the gauge, set the value
property in pointers
object of the axis.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes: [{
minimum: 0,
maximum: 200,
pointers: [{
value: 140
}],
labelStyle: {
format: '{value}°C'
},
ranges: [{
start: 0,
end: 80,
startWidth:15,
endWidth:15
}, {
start: 80,
end: 120,
startWidth:15,
endWidth:15
}, {
start: 120,
end: 140,
startWidth:15,
endWidth:15
}, {
start: 140,
end: 200,
startWidth:15,
endWidth:15
}]
}]
}, '#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" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
The pointer value is changed in the below sample using the value
property in pointers
object of the axis.
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
axes:[{
pointers:[{
value: 40,
color: 'green'
}]
}]
}, '#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" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>