Basic Settings

24 Jul 20182 minutes to read

Height and Width Customization

The basic customization for any control is to set the dimension. Here dimension refers to two major attributes such as height and width. The height and width assigned in the control will render the canvas element in the given size. The code example to set height and width is as follow.

HTML

<ej-digitalgauge id="DigitalGauge1" value="Syncfusion" height="200" width="500">
</ej-digitalgauge>

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

Responsive Layout

• For any display devices, the control will be rendered based on the space available in that device. For this purpose, resizing property is given to the Digital Gauge control. The Digital Gauge renders with a given value.

• When the browser resize the canvas element checks the dimension with its parent element. If there are any changes in parent dimension, Gauge control will changes the dimension based on its parent element change. This feature is enabled by using the property isResponsive.

HTML

<ej-digitalgauge id="DigitalGauge1" [isResponsive]="true" value="Syncfusion" height="200" width="500">
</ej-digitalgauge>

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

Themes

Themes give the good appearance to the control. There are two types of Themes available for DigitalGauge as follows

• FlatLight

• FlatDark

HTML

<ej-digitalgauge id="DigitalGauge1" [isResponsive]="true" themes="FlatDark" value="Syncfusion"
                                                                          height="200" width="500">
</ej-digitalgauge>

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