Dashboard components

This article describes components in Components Library > Dashboard.

ReactSpeedometer

The ReactSpeedometer component displays a speedometer gauge that visualizes a numeric value as a needle position within a colored arc. It supports configurable value ranges, segment colors, needle animation, and custom segment labels. In the App Designer, select a ReactSpeedometer on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the data, appearance, and dimension properties of the ReactSpeedometer.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Value	Number input	0	Sets the current value displayed by the needle. The value must be between Min value and Max value.
Min value	Number input	0	Sets the minimum value at the start of the gauge arc.
Max value	Number input	1000	Sets the maximum value at the end of the gauge arc.
Force render	Toggle switch	Off	Forces a full component re-render whenever props change.
Width	Number input	300	Sets the width (in the unit specified by Dimension unit) of the speedometer.
Height	Number input	300	Sets the height (in the unit specified by Dimension unit) of the SVG element.
Dimension unit	Text input	px	Specifies the CSS unit for the width and height values. Accepted values: em, ex, px, in, cm, mm, pt, pc.
Fluid width	Toggle switch	Off	When enabled, the speedometer expands to fill the width of its parent container, ignoring the Width value.
Needle color	Color picker	steelblue	Sets the color of the needle.
Start color	Color picker	#FF471A	Sets the starting color of the arc gradient.
End color	Color picker	#33CC33	Sets the ending color of the arc gradient.
Segment colors	Array setter (Color picker items)	-	Defines custom colors for individual arc segments, overriding the gradient defined by Start color and End color.
Needle transition	Dropdown (easeLinear | easeQuadIn | easeQuadOut | easeQuadInOut | easeCubicIn | easeCubicOut | easeCubicInOut | easePolyIn | easePolyOut | easePolyInOut | easeSinIn | easeSinOut | easeSinInOut | easeExpIn | easeExpOut | easeExpInOut | easeCircleIn | easeCircleOut | easeCircleInOut | easeBounceIn | easeBounceOut | easeBounceInOut | easeBackIn | easeBackOut | easeBackInOut | easeElasticIn | easeElasticOut | easeElasticInOut | easeElastic)	Ease quad in out	Specifies the D3 easing function used for the needle animation.
Needle transition duration	Number input	500	Sets the duration (in milliseconds) of the needle animation when the value changes.
Needle height ratio	Number input	0.9	Sets the length of the needle relative to the gauge radius. Accepts values between 0 and 1.
Ring width	Number input	60	Sets the width (in pixels) of the colored arc ring.
Text color	Color picker	#666	Sets the color of all text elements on the gauge, including labels and the current value.
Value format	Text input	-	Sets a format string used to format the displayed value (for example, d for integers, .1f for one decimal place).
Current value placeholder style	Text input	${value}	Sets a custom placeholder string used in Current value text as an alternative to ${value}.
Current value text	Text input	${value}	Sets the template string for the current value label. Use ${value} as a placeholder (for example, Current value: ${value}).
Custom segment stops	Array setter (Number input items)	-	Defines custom boundary values for arc segments. When set, overrides the automatic segment distribution between Min value and Max value.
Custom segment labels	Array setter (Object items)	-	Defines custom labels for each arc segment. Each label item has a Text, Position (INSIDE or OUTSIDE), Font size, and Color.
Label font size	Text input	14px	Sets the font size for the arc segment labels. Accepts a CSS font size string (for example, 14px).
Value text font size	Text input	16px	Sets the font size for the current value label. Accepts a CSS font size string (for example, 16px).
Value text font weight	Text input	bold	Sets the font weight for the current value label (for example, bold or 700).
Padding horizontal	Number input	0	Sets the horizontal padding (in pixels) around the gauge to ensure segment labels are not clipped.
Padding vertical	Number input	0	Sets the vertical padding (in pixels) around the gauge to ensure segment labels are not clipped.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Best practices

1. Set Correct Value Bounds

   • Always ensure Value is between Min value and Max value at runtime. Values outside this range will cause the needle to render at the arc boundary.

2. Use Custom Segment Stops for Thresholds

   • Use Custom segment stops together with Segment colors to define meaningful threshold zones (for example, green for normal, yellow for warning, red for critical).

3. Use Fluid Width for Responsive Layouts

   • Enable Fluid width when the speedometer is placed inside a responsive container such as a Card or Cell that resizes with the viewport. When enabled, the Width value is ignored.

4. Format Values for Readability

   • Use the Value format property with a format string to display values in a human-readable form (for example, .0f for rounded integers or ,.2f for thousands-separated decimals).

Last updated on 20 May 2026