Add style to gauge element in your page

• Set color for the gauge elements
• Add style to the gauge elements

Set color for the gauge elements

1. Edit your app.
2. Select the required page from the accordion menu on the top-left corner, or from the application preview in the middle. You'll be taken to its Design page.
3. Click on the device icon to navigate to the Design view of the device of your choice.

   

4. Hover in the middle and click Open Page Builder.​
5. Click to select the required gauge element and click Configure at the top of the page builder. You can also double-click the gauge element to open the Gauge Configuration pane that will slide in from the right.
6. Click the Style tab on the top right of the configuration menu.
7. Click the color-picker icon and select a default color for the gauge range. You can also choose different colors for the ranges, target and needle elements of the gauge by clicking the Advanced options.
8. Click the color-picker (bucket-shaped) icon to set a background color for the panel in which the gauge is placed.
9. The changes will be automatically saved.

Add style for the gauge elements

1. Under the Value section, you can customize the style, font-color and font-size of the display data type chosen for your gauge.
2. Under the Target section, you can customize the style, font-color and font-size for your gauge target.
3. Under the Minimum/Maximum section, you can customize the style, font-color and font-size of the display data type chosen for your gauge ranges — minimum and maximum values.