The gauge component is used to show the progress towards a goal. The set Target gets marked and the pointer displays our progress.

Default Chart Image:

Properties of the Gauge component:

  • Background:

    • The user can enable border, change the border color, and border-radius.

    • The user can enable the shadow, change the shadow color, and transparency of the shadow.

    • If the user gives 2 or more colors in the gradient its position can be adjusted by Gradient Rotation.


  • The user can change the height, width, top, left values.

  • Put a checkmark in given box to select Initial Visibility option. If this option is enabled, then the chart appears in the first preview of the dashboard.

  • If the user enables the ticks, then the user can see marker lines on the gauge.

  • Use a checkmark in the given box to show the Range.

  • If the user enables the show title option and gives some units in the Title section it will get displayed inside the gauge at the top position.

Please Note: The chart will not be visible at the first preview if the initial visibility is unchecked.


  • Colors for the range can be specified under the range section.

  • Also, what is the current value of the gauge and the target can be specified under the Value Variable and Target Value.

  • Also, the minimum and maximum range can be set.


  • The Bezel color can be changed to adjust the gauge border color.

  • The selected Face color will be the Gauge Fill color.

  • The Tick Color changes the color of ticks/markers between ranges.

  • The Pointer Color is changed for adjusting the tick pointer color.

  • Also, the user can change the label font color, title font color, font family, and font size under this section.


  • This properties section helps to provide format for the monetary data.

Modified Gauge by changing the properties:

Last updated