Search results

Appearance in JavaScript Linear Gauge control

22 Jul 2021 / 4 minutes to read

Customizing the Linear Gauge area

The following properties are available in the LinearGauge to customize the Linear Gauge area.

  • background - Applies the background color for the Linear Gauge.
  • border - To customize the color and width of the border in Linear Gauge.
  • margin - To customize the margins of the Linear Gauge.
Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
background: 'skyblue',
border: {
    color: "#FF0000",
    width: 2
},
margin: {
    left: 40,
    right: 40,
    top: 40,
    bottom: 40
}
}, '#element');
Copied to clipboard
<!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>

Setting up the Linear Gauge title

The title for the Linear Gauge can be set using title property in Linear Gauge. Its appearance can be customized using the titleStyle with the below properties.

  • color - Specifies the text color of the title.
  • fontFamily - Specifies the font family of the title.
  • fontStyle - Specifies the font style of the title.
  • fontWeight - Specifies the font weight of the title.
  • opacity - Specifies the opacity of the title.
  • size - Specifies the font size of the title.
Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
    // Title for linear gauge.
    title: 'linear gauge',
    titleStyle: {
        fontFamily: "Arial",
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: "#E27F2D",
        size: '23px'
    }
}, '#element');
Copied to clipboard
<!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>

Customizing the Linear Gauge container

The area used to render the ranges and pointers at the center position of the gauge is called container. It is of three types namely

  • Normal
  • Rounded Rectangle
  • Thermometer

The type of the container can be modified by using the type property in container. The container can be customized by using the following properties in container.

  • offset - To place the container with the specified distance from the axis of the Linear Gauge.
  • width - To set the thickness of the container.
  • height - To set the length of the container.
  • backgroundColor - To set the background color of the container.
  • border - To set the color and width for the border of the container.

Normal

The ”Normal” type will render the container as a rectangle and this is the default container type.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
container: {
    width: 30
},
axes: [{
    pointers: [{
        value:50,
        width:15,
        type:'Bar'
    }]
}]
}, '#element');
Copied to clipboard
<!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>

Rounded Rectangle

The ”RoundedRectangle” type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the roundedCornerRadius property in container.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
container: {
    width: 30,
    type: 'RoundedRectangle'
},
axes: [{
    pointers: [{
        value:50,
        width:15,
        type:'Bar'
    }]
}]
}, '#element');
Copied to clipboard
<!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>

Thermometer

The ”Thermometer” type will render the container similar to the appearance of thermometer.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
container: {
    width: 30,
    type: 'Thermometer'
},
axes: [{
    pointers: [{
        value:50,
        width:15,
        type:'Bar'
    }]
}]
}, '#element');
Copied to clipboard
<!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>

Fitting the Linear Gauge to the control

The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the allowMargin property in LinearGauge is set as ”false“.

Source
Preview
index.ts
index.html
Copied to clipboard
import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
allowMargin: false,
background: "skyblue",
border: {
    width: 3,
    color: "red"
},
margin: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0
},
axes: [{
}]
}, '#element');
Copied to clipboard
<!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>

Note: To use this feature, set the allowMargin property to ”false”, the width property to ”100%” and the properties of margin to ”0“.