Overview
This is a user guide to change the visual appearance of a widget (size, colors, borders, other widget-specific style customizations).
How to adjust Widget Style
| Step | Screenshot | |
| 1 | Place a Widget on the canvas (click on ‘Add’ button nearby the widget from widget library) |  |
| 2 |
Select the widget placed on the canvas, review available Style customization options under ‘Style’ section inside ‘Properties’ tab |
 |
| 3 |
If available, click on ‘Show Advanced Options’ to review the complete list of available Style customizations |
 Advanced Options are collapsed
 Advanced Options are expanded
|
| 4 |
Save Changes to the Graphic Layout |
 |
| 5 |
Review changes in Graphics Viewer (Customer/ Site / Equipment page where Graphic was linked) |
 |
Available Widget Style Customizations
| Style Customization | Applicable to Widgets | Description | Option in Graphics Builder | Outline example (Graphics Viewer) | |
| 1 |
Width |
Map, Chart, Scatter, Image, Table |
Width of a Widget in pixels |
|
|
| 2 |
Height |
Map, Chart, Scatter, Image, Table |
Height of a Widget in pixels |
|
|
| 3 |
Background Color |
Icon, Chart, Shapes |
Defines background color for a Widget: one can select any color via color picker or code |
  Current selection
  New selection
|
 
|
| 4 |
Color Theme |
Chart, Scatter |
A Color palette being used to display a Widget. One can either select from standard Themes or define a custom Theme. |
  Current Selection
  New Selection
|
 
|
| 5 |
Background Transparency |
Icon, Chart, Shapes |
Changes transparency of a Widget from 0 (transparent) to 1 (solid) with 0.1 stepper |
 
|
 
|
| 6 |
Border Color |
Icon, Chart, Shapes |
Defines background color of a Widget: one can select any color via color picker or code |
  Current Selection
 New selection
|
 
|
| 7 |
Border Width |
Icon, Chart |
Defines Border Width of a Widget in pixels: from 0 px to 10 px with 1 px stepper |
 |
Thick border width |
| 8 |
Border Radius |
Chart |
Defines Border Radius of a Widget corners in pixels: from 0 px to 10 px with 1 px stepper |
 
|
  Rounded border radius
|
| 9 |
X Attribute Name |
Chart |
Defines an Attribute to be used for X Axis:
NOTE: must apply ‘Parse URI’ Data Pipeline to be able to use the attributes |
 
|
  Timestamp on X Axis
|
| 10 |
Y Attribute Name |
Chart |
Defines an Attribute to be used for Y Axis: List of possible values:
|
 
|
 Y Axis shows value
|
| 11 |
Hide X Axis |
Chart |
If enabled, hides X axis of a Widget in Graphics View Mode |
|
  X Axis is hidden
|
| 12 |
Hide Y Axis |
Chart |
If enabled, hides Y axis of a Widget in Graphics View Mode |
|
 
|
| 13 |
Show Legend |
Chart |
If enabled, shows Legend in Graphics View Mode according to Legend Position defined |
|
  Legend |
| 14 |
Legend Position |
Chart |
Shows Legend in Graphics View Mode in the selected position towards a Widget:
|
 
|
  Legend at the bottom
|
| 15 |
Show Timespan Filter |
Chart |
If enabled, shows Timespan Filter towards a Widget in Graphics View Mode to change period for a Widget :
|
|
 |
| 16 |
Show Data Labels |
Chart |
If enabled, shows Data Labels next to each Datapoint in Graphics View Mode |
|
  Data Labels |
| 17 |
Show X-Axis Grid |
Chart |
If enabled, shows X-Axis Grid in Graphics View Mode |
|
  X-Axis Grid
|
| 18 |
Show Y-Axis Grid |
Chart |
If enabled, shows Y-Axis Grid in Graphics View Mode |
 
|
  Y-Axis Grid |
| 19 |
Datapoint Radius |
Chart |
Changes size of a datapoint on Widget in pixels: from 0 px to 5 px (solid) with 1 px stepper |
 
|
  Extended Datapoint Radius |
| 20 |
Override Priority |
Dual Setpoint Thermostat, Thermostat, Slider |
Sets the Priority from BACnet Priority Array to be overriden by a Widget (please find more info about Priority Array workflow in BACnet Basics - BACnet Priority Array |
 |
N/A
|
| 21 |
Icon |
Icon |
An Icon from icon library |
 
|
 
|
| 22 |
Frame URL |
Iframe |
URL to be displayed inside Iframe |
 |
 |
| 23 |
Theme |
Map |
|
 |
 |
| 24 |
Zoom |
Map |
Defines zoom ration for a widget |
 |
N/A
|
| 25 |
Size |
Slider |
Defines size of a Widget in pixels |
 |
N/A
|
| 26 |
Weight |
Slider |
Defines font weight for a Widget |
 |
 |
| 27 |
Horizontal Alignment |
Column, Row |
|
 
|
 
|
| 28 |
Vertical Alignment |
Column, Row |
|
  |
 
|
| 29 |
Border Style |
Shapes |
|
  |
 
|
| 30 |
Color |
Link |
Defines Font Color for a Widget in pixels |
   
|
|
| 31 |
Font Size |
Link |
Defines Font Size for a Widget in pixels |
 
|
|
| 32 |
Font Weight |
Link |
Defines Font Weight for a Widget |
 
|
 
|
| 33 |
Text Align |
Link |
Defines Text Align for a Widget |
 |
 |
