Multiple Items

12 May 20174 minutes to read

The text in the Digital Gauge is positioned with position object. This object contains two attributes such as x and y. The x variable positions the text in the horizontal axis and y variable positions the text in the vertical axis.

html

<div id="DigitalGauge1"></div>

javascript

"use strict";

 var items = [
 // For Item 1
            {
                // For setting text
                value: "BLUE",
                segmentSettings: {
                    color: "blue"
                },
                position: {
                    x: 90,
                    y: 0
                }
            },
            // For Item 2
            {
                // For setting text
                value: "RED",
                segmentSettings: {
                    color: "red"
                },
                position: {
                    x: 90,
                    y: 50
                }
            },
            // For Item 3
            {
                // For setting text
                value: "PINK",
                segmentSettings: {
                    color: "pink"
                },
                position: {
                    x: 90,
                    y: 100
                }	
            }
            ];   
var frame = {
                backgroundImageUrl: "Board1.jpg"
            };          
        
ReactDOM.render(
                <ej.digitalgauge id="digitalgauge1" width={1350} height={400} items = {items} frame = {frame} >
                </ej.digitalgauge >,
                    
                 document.getElementById('DigitalGauge1')
             );

Execute the above code example to render the DigitalGauge as follows.