Linear gauge dimensions in EJ2 TypeScript Linear gauge control

19 Apr 20233 minutes to read

Size for Linear Gauge

The height and width of the Linear Gauge can be set using the width and height properties in Linear Gauge.

In Pixel

The size of the Linear Gauge can be set in pixel as demonstrated below.

import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
    width: '650px',
    height: '350px'
}, '#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>
<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: 20%;">
        <div id='element' style="margin-top: 20%;"></div>
    </div>
</body>

</html>

In Percentage

By setting value in percentage, Linear Gauge receives its dimension matching to its parent. For example, when the height is set as 50%, Linear Gauge renders to half of the parent height. The Linear Gauge will be responsive when the width is set as 100%.

    <div id='container'>
        <div id='element' style="width:1000px; height:600px;"></div>
    </div>

import { LinearGauge } from '@syncfusion/ej2-lineargauge';
let gauge: LinearGauge = new LinearGauge({
    width: '100%',
    height: '50%'
}, '#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>
<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: 20%;">
        <div id='element' style="margin-top: 20%;"></div>
    </div>
</body>

</html>

Note: When the component’s size is not specified, the height will be 450px and the width will be the same as the parent element’s width.