This page shows how to get started with Wijmo's Gauge controls.
The wijmo.gauge module includes the LinearGauge, RadialGauge, and BulletGraph controls. They are used to display and optionally edit numeric information graphically.
Steps for getting started with Gauge controls in Vue applications:
In addition to displaying information graphically, gauges can be used as input controls (in this case they are also known as "sliders").
To use gauge controls for input, set the isReadOnly property to false. This will allow users to change the gauge's current value simply by clicking or tapping the gauge.
When using gauges as input controls, remember to set the step property to define the precision of the changes applied by clicking or tapping, as well as the magnitude of changes applied by spinning the mouse wheel.
You can also use the showTicks property to display tickmarks on the gauge. The step property determines the spacing between tickmarks.
The example below demonstrates how to use the isReadOnly, step, and showTicks properties with the LinearGauge and RadialGauge controls.
By default, gauges indicate the current value by filling the control with color. You can use the thumbSize property to add a visual element that highlights the current value.
The example below demonstrates how to use the thumbSize property. The example also reduces the thickness property of the gauge's face and pointer ranges so the thumb becomes more visible.
All Wijmo gauges have a ranges property that contains an array of Range objects. By default, ranges are displayed on the face of gauge to indicate zones of interest; however, you can use the showRanges property to hide the ranges. In this case, the gauge determines which range contains the current value and applies that range's color to the gauge pointer.
You can customize each Range object using the min, max, and color properties.
The following example demonstrates how to use ranges with the LinearGauge and RadialGauge controls.
The gauge controls are designed to be styled mostly with CSS, but they do have several properties that affect their layout and appearance:
The example below shows the effect of these properties on linear and radial gauges:
The gauge controls have three properties that affect text display:
The example below shows how to use the getText callback to provide custom strings for the gauge value. Click the gauge to change its value and notice how the value displayed changes between "Empty", "Low", "Good", and "Full".
The example also changes the font color and weight using CSS.
The appearance of the gauge controls is primarily defined in CSS. To customize it, copy the CSS rules from the default theme to a new CSS file and modify the rules as needed.
In this example, we added a "custom-gauge" class to the gauges and defined some CSS rules to customize the appearance of the gauge's "face" range and of the thumb. The custom CSS rules also use the "wj-state-focused" class to increase the size of the thumb when the gauge has the focus.