Demos
Documentation
API
More Samples
Download Wijmo

Gauge Elements

Every Wijmo gauge is composed of the following elements, defined in the control template:

  • Face: The "face" is a range that represents the gauge background. The "min" and "max" properties of the face range correspond to the "min" and "max" properties of the gauge control, and limit the values that the gauge can display.
  • Pointer: The "pointer" is a range that indicates the gauge's current value. The "max" property of the pointer range corresponds to the "value" property of the gauge.
  • Ranges: In addition to the "face" and "pointer" ranges, gauges may contain additional ranges that show zones within the gauge (like 'bad', 'average', and 'good'). Depending on the setting of the 'showRanges' property, these additional ranges may be shown at all times or used to determine the color of the 'pointer' based on the current gauge value.
  • Thumb: The thumb is a circle shown at the end of the 'pointer' range. Use the 'thumbSize' property to set the size of the thumb element.
  • Tickmarks: Tickmarks may be shown along the face to help users read the gauge. Their visibility and position are controlled by the 'showTicks', 'tickSpacing', and 'step' properties.
  • Text Values: Gauges may show the value of their 'min', 'max', and 'value' properties as text. Use the 'showText' property to determine which values should be displayed. Use the 'getText' property to customize the text displayed on the gauge.

Move the mouse over the gauge to highlight each element: