WjRadialGauge Class

The default value for this property is true.

This property is useful for positioning custom SVG elements on the gauge.

Use this property if you want to customize the strings shown on the gauge in cases where the format property is not enough.

If provided, the callback should be a function as that takes as parameters the gauge, the part name, the value, and the formatted value. The callback should return the string to be displayed on the gauge.

For example:

// callback to convert values into strings
gauge.getText = (gauge, part, value, text) => {
    switch (part) {
        case 'value':
            if (value <= 10) return 'Empty!';
            if (value <= 25) return 'Low...';
            if (value <= 95) return 'Good';
            return 'Full';
        case 'min':
            return 'EMPTY';
        case 'max':
           return 'FULL';
    }
    return text;
}

The default value for this property is true.

The default value for this property is true.

The default value for this property is true.

Disabled controls cannot get mouse or keyboard events.

The default value for this property is true.

For details about using the min and max properties, please see the Using the min and max properties topic.

For details about using the min and max properties, please see the Using the min and max properties topic.

If provided, the needle element should extend from 0 to 100 units in the X direction, and should typically be symmetrical about the Y axis.

When this property is set, the needle element becomes part of the gauge DOM and is removed from its original container. To use the same element in several gauges, use the clone method to create copies of the needle element.

The default value for this property is NeedleLength.Middle.

Use this property to select one of the pre-defined needle shapes. The pre-defined shapes are created using the createNeedleElement method.

You can also create custom needle elements by setting the needleElement property to custom elements created using the createNeedleElement method with parameters of your choice, or to custom SVG group elements created using whatever method you prefer.

You can style the needle using CSS. For example:

.wj-gauge .wj-needle {
    fill: orangered;
    stroke: orangered;
}
.wj-gauge .wj-needle .wj-inner-needle-cap {
    fill: white;
}

The default value for this property is NeedleShape.None.

By default, this property is set to null, which causes the value range to start at the gauge's minimum value, or zero if the minimum is less than zero.

If this property is set to false, the ranges contained in the ranges property are not displayed in the gauge. Instead, they are used to interpolate the color of the pointer range while animating value changes.

The default value for this property is true.

The default value for this property is ShowText.All for RadialGauge controls, and to ShowText.None for LinearGauge controls.

You can use CSS to style the tickmark text:

.wj-gauge .wj-tick-text text {
    opacity: 1;
    font-family: Courier;
    font-size: 8pt;
    fill: purple;
}

See also the showTicks and tickSpacing properties.

The default value for this property is false.

The tickmarks can be formatted in CSS using the wj-gauge and wj-ticks class names. For example:

.wj-gauge .wj-ticks {
    stroke-width: 2px;
    stroke: white;
}

The default value for this property is **false.

By default, stackRanges is set to false, and the ranges in the ranges collection are displayed with the same thickness as the gauge's face.

Setting stackRanges to true causes the ranges to become narrower, and to be displayed side-by-side.

Angles are measured in degrees, clockwise, starting from the 9 o'clock position.

The default value for this property is 0.

Angles are measured in degrees, clockwise, starting from the 9 o'clock position.

The default value for this property is 180 degrees.

tabindex attribute value can be defined statically for a Wijmo control by specifying it on the control's host HTML element. But this value can't be changed later during application lifecycle, because Wijmo controls have complex structure, and the control may need to propagate this attribute value to its internal element to work properly.

Because of this, to read or change control's tabindex dynamically, you should do it using this property.

Setting the thickness to one causes the gauge to fill as much of the control area as possible. Smaller values create thinner gauges.

Set the showTicks property to true if you want the gauge to show tickmarks along its face. By default, the interval between tickmarks is defined by the step property.

Use the tickSpacing property to override the default and use a spacing that is different from the step value. Set the tickSpacing property to null to revert to the default behavior.