Search results

Ranges

You can categorize the axis values using start and end property in the ranges. You can add any number of range for an axis by using array of range objects.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
axes: [{
        ranges: [{
            start: 50,
            end: 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://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Ranges Customization

Ranges can be customized by using startWidth, endWidth and color properties in the range object.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
 axes: [{
        ranges: [{
            start: 50,
            end: 80,
            startWidth: 10,
            endWidth: 20,
            color: 'red'
        }]
    }]
}, '#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://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Multiple Ranges

You can add multiple ranges to an axis as demonstrated below.

Source
Preview
index.js
index.html
var gauge = new ej.lineargauge.LinearGauge({
    axes: [{
            ranges: [
                {
                    start: 0,
                    end: 30,
                    startWidth: 10,
                    endWidth: 10,
                    color: '#41f47f'
                },
                {
                    start: 30,
                    end: 50,
                    startWidth: 10,
                    endWidth: 10,
                    color: '#f49441'
                }, {
                    start: 50,
                    end: 100,
                    startWidth: 10,
                    endWidth: 10,
                    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://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>