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 Report Layout |
 |
| 5 |
Review changes in Report Preview |
 |
Available Widget Style Customizations
| Style Customization | Applicable to Widgets | Description | Option in Report Builder | Outline example (Report Viewer) | |
| 1 |
Width |
Chart, Scatter, Image, Table |
Width of a Widget in pixels |
|
|
| 2 |
Height |
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 |
 |
 |
| 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:
|
 
|
 
|
| 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 |
|
 
|
| 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 |
|
 
|
| 17 |
Show X-Axis Grid |
Chart |
If enabled, shows X-Axis Grid in Graphics View Mode |
|
 
|
| 18 |
Show Y-Axis Grid |
Chart |
If enabled, shows Y-Axis Grid in Graphics View Mode |
 
|
 
|
| 19 |
Datapoint Radius |
Chart |
Changes size of a datapoint on Widget in pixels: from 0 px to 5 px (solid) with 1 px stepper |
 
|
 
|
| 20 |
Icon |
Icon |
An Icon from icon library |
 
|
 
|
| 21 |
Horizontal Alignment |
Column, Row |
|
 
|
 
|
| 22 |
Vertical Alignment |
Column, Row |
|
  |
 
|
| 23 |
Border Style |
Shapes |
|
  |
 
|
| 24 |
Color |
Text String, Value, Relative Data |
Defines Font Color for a Widget in pixels |
   
|
|
| 25 |
Font Size |
Text String, Value, Relative Data |
Defines Font Size for a Widget in pixels |
 
|
|
| 26 |
Font Weight |
Text String, Value, Relative Data |
Defines Font Weight for a Widget |
 
|
 
|
| 27 |
Text Align |
Text String, Value, Relative Data |
Defines Text Align for a Widget |
 |
 |
