LinearGauge Configuration

An object that defines configuration options for the dxLinearGauge widget.

animation

Specifies animation options.

Type: Object

To make your gauge "live", enable animation for it by setting the enabled option of the animation object to true. In this instance, the gauge indicators will appear in motion. In addition, within the animation object, you can set an appropriate easing mode using the easing option and specify how long the animation should run using the duration option.

Show Example:
jQuery

In this example, the animation | duration option is changed to 2000 ms. In addition, the animation easing mode is changed to 'linear' using the animation | easing option. Switch between the radio buttons to see how the gauge animation performs with these settings.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
<div id="controlsContainer" style="height:20px;width:300px;margin:0px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="radio" name="newValue" value="0"> 0
    <input type="radio" name="newValue" value="25" checked> 25
    <input type="radio" name="newValue" value="50"> 50
    <input type="radio" name="newValue" value="75"> 75
    <input type="radio" name="newValue" value="100"> 100
</div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'peachpuff' },
        valueIndicator: { color: 'palegoldenrod' },
        value: 32,
        animation: {
            easing: 'linear',
            duration: 2500
        }
    });

    $("input[name='newValue']").change(function () {
        var newValue = +$(this).val();
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.value(newValue);
    });
});

animationDuration

Deprecated

Use the animation | duration option instead.

Determines how long animation runs.

Type: Number
Default Value: 1000

When animation is enabled for a gauge (see the animationEnabled option), you can set how long the animation must run. To do this, set the animationDuration option to a numeric value in milliseconds. The bigger the value, the slower the animation.

animationEnabled

Deprecated

Use the animation | enabled option instead.

Indicates whether or not animation is enabled.

Type: Boolean
Default Value: true

When this option is set to true, the value and subvalue indicators move smoothly to the specified values.

commonMarkerSettings

Deprecated

Use the subvalueIndicator option instead.

An object that defines common configuration options for gauge markers.

Type: Object

Use this object's properties to set options for all gauge markers at once. If you need to set an individual value for a common option, use the corresponding marker object within the markers array. Values that are set individually override their corresponding common values.

commonNeedleSettings

Deprecated

Use the valueIndicator option instead.

An object defining the configuration options that are common for all gauge needles.

Type: Object

Use this object's properties to set options for all gauge needles at once. In case you have to set an individual value for a common option, use the corresponding needle object within the needles array. The values that are set individually override corresponding common values.

commonRangeBarSettings

Deprecated

Use the valueIndicator option instead.

An object that defines common configuration options for gauge range bars.

Type: Object

Use this object's properties to set options for all gauge range bars at once. If you need to set an individual value for a common option, use the corresponding rangeBar object within the rangeBars array. Values that are set individually override their corresponding common values.

containerBackgroundColor

Specifies the color of the parent page element.

Type: String
Default Value: 'none'

Set this property to the color of the parent page element. Certain elements of the widget will use this color so that they coordinate with the page. Currently, different auxiliary separators use the container background color, so there is no need to set a custom color for them.

Show Example:
jQuery

In this example, the containerBackgroundColor option is set to olive.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        value: 32,
        containerBackgroundColor: 'springgreen',
        subvalues: [ 34, 59 ]
    });
});

drawn

Specifies a callback function that is called when the widget has finished drawing itself.

Type: function(widget)
Function parameters:
widget: Object
The instance of the drawn widget.

If you need to perform specific actions when the widget has finished drawing itself, assign a callback function to the drawn option. When implementing this function, you can access the instance of the currently drawn widget using the function's parameter or the this object.

geometry

Specifies the options required to set the geometry of the dxLinearGauge widget.

Type: Object

Show Example:
jQuery

In this example, the gauge is oriented vertically.

<div id="linearGaugeContainer" style="max-height:600px;max-width:600px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: { color: 'yellowgreen' },
        value: 32,
        geometry: {
            orientation: 'vertical'
        }
    });
});

incidentOccured

Specifies a callback function that is called when an error or warning appears.

Type: function(incidentInfo)
Function parameters:
incidentInfo: Object
Contains information about the occurred incident.

When an error or warning appears, the widget notifies you by passing a message to the browser console. This message contains the ID of the incident, a brief description, and a link to the Errors and Warnings section where further information about this incident can be found. However, you can handle errors and warnings in the way that you require. To do this, implement a callback function performing the required actions and assign it to the incidentOccured option. Within this function, you can use various information about the incident that occurred. This information can be accessed from the fields of the object passed to the callback function as a parameter. These fields are as follows.

  • id
    Contains the ID of the incident. The full list of IDs can be found in the Errors and Warnings section.
  • type
    Contains the type of the incident. This field equals 'error' for errors or 'warning' for warnings.
  • args
    Contains the argument of the incident's message. The content of this field varies greatly, depending on the incident. For example, it may contain the name of the data source field that was not specified correctly, or the name of the option that was not set properly.
  • text
    Contains the text passed to the browser console. This text includes the content of the args field, if there are any.
  • widget
    Contains the name of the widget that produced the error or warning.
  • version
    Contains the currently used version of the ChartJS library.

loadingIndicator

Specifies the appearance of the loading indicator.

Type: Object

Usually, the widget is quick enough to draw itself instantly for a viewer. There are, however, cases, when the widget takes longer to be drawn. In such cases, displaying the loading indicator is recommended. Use the widget's showLoadingIndicator() and hideLoadingIndicator() methods to manage the loading indicator. To specify its appearance, use the loadingIndicator configuration object.

Show Example:
jQuery

In this example, the gauge options are assigned 2000 ms after the example is loaded. Until that time the loading indicator is displayed. Its background and font are changed using the backgroundColor and font options respectively. Take note that these options should be specified at design-time so that the changes are applied at the right time.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
var gaugeOptions = {
    scale: {
        startValue: 0,
        endValue: 60,
        majorTick: { tickInterval: 10 }
    },
    rangeContainer: {
        backgroundColor: 'none',
        ranges: [
            {
                startValue: 0,
                endValue: 20,
                color: '#A6C567'
            }, {
                startValue: 20,
                endValue: 40,
                color: '#FCBB69'
            }, {
                startValue: 40,
                endValue: 60,
                color: '#E19094'
            }
        ]
    },
    value: 24,
    subvalues: [27, 44]
};

$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        loadingIndicator: {
            backgroundColor: 'lightcyan',
            font: {
                weight: 700,
                size: 16
            }
        }
    }).dxLinearGauge('instance').showLoadingIndicator();
});

var configureGauge = function () {
    var gauge = $("#linearGaugeContainer").dxLinearGauge('instance');
    gauge.option(gaugeOptions);
};

setTimeout(configureGauge, 2000);

margin

Specifies the blank space in pixels between the widget's extreme elements and the boundaries of the area provided for the widget (see the size option).

Type: Object

Set the required values for the left, right, top and bottom margins using the margin object's corresponding options.

GaugeMargin ChartJS

markers[]

Deprecated

Use the subvalues option instead.

Specifies options for the gauge's marker(s).

Type: Array
Default Value: []

A marker is a small pointer that indicates a fixed value on a scale. If you need to mark a single value, assign an object defining a marker to the markers configuration object. In the marker's object, specify the value to be indicated, and define the marker's appearance and location.
If you need to indicate several values on a scale, specify markers as an array of objects defining markers. If you need to set similar values to properties of several markers, use the commonMarkerSettings configuration object. It exposes the properties that can be specified for all markers at once. Note that the values specified for a marker individually (in the markers array) override the values that are specified for all markers (in the commonMarkerSettings object).
To define a marker individually, use the properties listed in the markers object. In addition, any property of the commonMarkerSettings configuration object can be added to the marker's individual definition. For example, even though a common type is specified in the commonMarkerSettings, an individual type can be specified for each marker.

needles[]

Deprecated

Use the value option instead.

Specifies options for the gauge's needle(s).

Type: Array
Default Value: []

A needle is used to indicate a current value in the gauge. If you need to indicate a single value, assign an object defining a needle to the needles configuration object. In the needle's object, specify the value to be indicated, and define the needle's appearance and location.
If you need to indicate several values on a scale, specify needles as an array of objects defining needles. If you need to set similar values to properties of several needles, use the commonNeedleSettings configuration object. It exposes the properties that can be specified for all needles at once. Note that the values specified for a needle individually (in the needles array) override the values that are specified for all needles (in the commonNeedleSettings object).
To define a needle individually, use the properties listed in the needles object. In addition, any property of the commonNeedleSettings configuration object can be added to the needle's individual definition. For example, even though a common type is specified in the commonNeedleSettings, an individual type can be specified for each needle.

pathModified

Notifies a widget that it is embedded into an HTML page that uses a path modifier.

Type: Boolean
Default Value: false

If you place a widget on a page that uses a path modifier, notify the widget about it by setting the pathModified option to true. As an example of such modifiers, the base HTML tag can be considered. Also, we recommend you to enable this option if you place the widget inside the <iframe> tag.

preset

Deprecated

Use a combination of the valueIndicator | type and subvalueIndicator | type options instead.

Sets the name of the preset to be used in the dxLinearGauge widget.

Type: String
Default Value: 'preset1'
Accepted Values: 'preset1' | 'preset2'

Presets are used to specify the type of gauge needles, markers and range bars. Each preset uses a needle/range bar and a marker. The following presets are defined.

  • preset1: circle + textCloud
  • preset2: rhombus + triangle

rangeBars[]

Deprecated

Use the value option instead.

Specifies options for the gauge's range bar(s).

Type: Array
Default Value: []

A range bar is a filled sector that represents a specific interval (e.g., working hours). If you need to show a single range bar, assign an object defining this range bar to the rangeBars configuration object. In the range bar's object, specify the bar boundaries and define the bar's appearance and location.
If you need to show several range bars, specify rangeBars as an array of objects defining range bars. If you need to set similar values to properties of several range bars, use the commonRangeBarSettings configuration object. It exposes the properties that can be specified for all range bars at once. Note that the values specified for a range bar individually (in the rangeBars array) override the values that are specified for all range bars (in the commonRangeBarSettings object).
To define a range bar individually, use the properties listed in the rangeBars object. In addition, any property of the commonRangeBarSettings configuration object can be added to the range bar's individual definition. For example, even though a common offset is specified in the commonRangeBarSettings, an individual offset can be specified for each range bar.

rangeContainer

Specifies gauge range container options.

Type: Object

For the purpose of more intelligible data visualization, you can combine values into ranges and color each range differently. For instance, you can indicate the range of warm and cold temperatures. To set the ranges, assign an array of objects defining the ranges to the ranges property of the rangeContainer configuration object. In addition, you can specify the orientation of the ranges relative to an invisible scale line, and an offset from this line using the rangeContainer properties.

Show Example:
jQuery

In this example, a number of options within the rangeContainer configuration object is changed. The range container is divided into ranges that are defined by the ranges option. These ranges are moved from the scale to a 5-pixel distance using the offset option. In addition, the backgroundColor option is set to firebrick.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                visible: true,
                color: 'black'
            },
            minorTick: {
                visible: true,
                color: 'black'
            }
        },
        valueIndicator: { type: 'rectangle', color: 'royalblue' },
        rangeContainer: {
            backgroundColor: 'firebrick',
            offset: 5,
            ranges: [
                { startValue: 0, endValue: 20, color: 'dodgerblue' },
                { startValue: 20, endValue: 40, color: 'lightskyblue' },
                { startValue: 40, endValue: 60, color: 'yellow' },
                { startValue: 60, endValue: 80, color: 'orange' }
            ]
        },
        value: 42
    });
})

redrawOnResize

Specifies whether to redraw the widget when the size of the parent browser window changes or a mobile device rotates.

Type: Boolean
Default Value: true

When this option is set to true, the widget will be redrawn automatically in case the size of its parent window changes.

NOTE: To redraw the widget after the size of its container has changed, call the render() method of the widget instance.

rtlEnabled

Specifies whether or not the widget supports right-to-left representation.

Type: Boolean
Default Value: false

The most common scenario is switching all the widgets to a right-to-left reading order. In this instance, set the DevExpress.rtlEnabled field to true. If you need to switch the reading order in a particular widget, use the rtlEnabled configuration option of this widget.

scale

Specifies the gauge's scale options.

Type: Object

To divide a scale, set its startValue and endValue properties. The scale's major and minor ticks will be calculated automatically, so that the tick labels do not overlap each other. Major ticks will be shown by default. To show minor ticks, set their visible property to true. You can set custom major and minor tick intervals, show custom major and minor ticks, and format tick labels. These and other scale options are available in the scale configuration object.

Show Example:
jQuery

In this example, several options of the gauge scale are changed. The scale is divided using the startValue and endValue options. Both the major and minor scale ticks are colored in black. In addition, the scale labels are displayed in a currency format.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'white' },
        valueIndicator: { type: 'circle' },
        scale: {
            startValue: 0,
            endValue: 100,
            majorTick: {
                color: 'black'
            },
            minorTick: {
                visible: true,
                color: 'black'
            },
            label: {
                format: 'currency'
            }
        },
        value: 45
    });
});

size

Specifies the size of the widget in pixels.

Type: Object

The widget occupies the entire area of the parent container (division). If the container size (width or height) is set to zero, the widgets are not displayed.
To set the widget to a specific size that differs from the container size, use the size configuration object. Assign a height and width in pixels to the height and width properties.

Show Example:
jQuery

In this example, the size of the dxLinearGauge widget is less than the container size.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto;border:1px solid black"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'coral' },
        scale: {
            label: { font: { color: 'chocolate' } }
        },
        valueIndicator: { color: 'salmon' },
        value: 42,
        size: {
            height: 100,
            width: 500
        }
    });
});

subtitle

Specifies a subtitle for the widget.

Type: Object|String

Use this property to set the text to be displayed as a gauge subtitle (the text below the title). If you need to specify the subtitle's font, assign an object to the subtitle property with the required options specified. In this instance, set the subtitle's text using the text property. When text is not specified for a subtitle, the widget is displayed without a subtitle.

Show Example:
jQuery

In this example, the subtitle text is assigned directly to the subtitle field.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumvioletred' },
        valueIndicator: { color: 'plum' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: 'Fan Speed',
        subtitle: '(in rotations per minute)'
    });
})

subvalueIndicator

Specifies the appearance options of subvalue indicators.

Type: Object

The dxLinearGauge widget can display one main value and several subvalues. The gauge's main value and subvalues are indicated by special pointers. You can customize the appearance of these pointers using the valueIndicator and subvalueIndicator configuration objects correspondingly.

The subvalue indicator is a pointer which designates an extra value on a scale. Subvalue indicators can be of two types: triangleMarker and textCloud. Different options of the subvalueIndicator configuration object can be used for each type. If you use the triangleMarker indicator, you can set the length and width options. If you use the textCloud indicator, the arrowLength and text options become available. The color, palette, offset, horizontalOrientation and verticalOrientation options can be used with an indicator of any type.

Show Example:
jQuery

In this example, the triangleMarker subvalue indicators are colored in forestgreen and increased in length to 20 pixels.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function() {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'lightgreen' },
        valueIndicator: { type: 'circle', color: 'limegreen' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        subvalueIndicator: {
            type: 'triangleMarker',
            color: 'forestgreen',
            length: 20

        },
        value: 439.92,
        subvalues: [135.35, 591.5, 942]
    });
})

subvalues

Specifies a set of subvalues to be designated by the subvalue indicators.

Type: Array
Default Value: undefined

In addition to one main value, you can indicate several extra values on a gauge. These are called subvalues. To specify the subvalues, assign an array with them to the subvalues field.

You can obtain and change the subvalues at runtime. In order to do this, use the subvalues() and subvalues(subvalues) methods.

Subvalues are designated by subvalue indicators. You can customize the appearance of these indicators using the subvalueIndicator configuration object.

Show Example:
jQuery

In this example, several subvalues are displayed on the gauge.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'coral' },
        valueIndicator: { color: 'khaki' },
        value: 43,
        subvalues: [34.5, 53, 12.34]
    });
});

theme

Specifies the name of the theme to be applied.

Type: String
Default Value: 'desktop'

Use this option to specify the name of the theme that should be applied to the widget. For information on customizing and implementing themes, refer to the Themes topic.

Show Example:
jQuery

In this example, a custom theme is implemented and applied to a gauge. In addition, you can change the type of the value indicator using the drop-down menu under the gauge. Note that options for the value indicator of each type are specified in separate objects within the gauge | valueIndicator configuration object.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Value Indicator Type:
    <select id="dropdownListSelector">
        <option value="rectangle">rectangle</option>
        <option value="rhombus">rhombus</option>
    </select>
</div>
var greenTheme = {
    name: 'gaugeGreenTheme',
    gauge: {
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        subvalueIndicator: {
            trianglemarker: {
                color: 'forestgreen',
                length: 20
            }
        },
        valueIndicator: {
            rectangle: {
                color: 'palegreen',
                length: 20
            },
            rhombus: {
                color: 'turquoise',
                width: 15
            }
        }
    }
};

DevExpress.viz.core.registerTheme(greenTheme, 'desktop');

$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        theme: 'gaugeGreenTheme',
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rectangle'
        },
        value: 84,
        subvalues: [34.5, 52, 12.34]
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#linearGaugeContainer').dxLinearGauge('instance');
        gauge.option({
            valueIndicator: {
                type: this.value
            }
        });
    });
});

title

Specifies a title for the gauge.

Type: Object|String

Use this property to set the text for the gauge title. If you need to specify the title's position on the widget, assign an object to the title property with the required title options specified. In this instance, set the title text using the text property. When title text is not specified, the widget is displayed without a title.

You can also place details on the gauge below the title. To do this, specifiy the subtitle configuration option.

Show Example:
jQuery

In this example, the title text is assigned directly to the title field.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'deepskyblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: 'Fan Speed (in rpm)'
    });
})

tooltip

Specifies tooltip options for the gauge.

Type: Object

A tooltip is a small pop-up rectangle that displays the value of the indicator that is currently hovered over. You can enable or disable tooltips, format or customize the displayed text, and change the default appearance. Use the properties of the tooltip configuration object to do this.

Show Example:
jQuery

In this example, a number of the tooltip options are changed. The tooltip value is displayed in a currency format with the precision of 2. In addition, the font size and weight options are changed. To see the tooltip, hover over the red range bar.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'purple' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        valueIndicator: {
            type: 'rangeBar',
            color: 'red'
        },
        tooltip: {
            enabled: true,
            format: 'currency',
            precision: 2,
            font: {
                size: 20,
                weight: 700
            }
        },
        value: 42.73
    })
})

value

Specifies the main value on a gauge.

Type: Number
Default Value: undefined

The main value is designated by the value indicator. To customize the appearance of the value indicator, use the valueIndicator configuration object.

You can obtain and change the gauge value at runtime. In order to do this, use the value() and value(value) methods.

Only one main value can be indicated on a gauge. Besides the main gauge value, you can indicate several extra values. Refer to the subvalues option description for more information.

Show Example:
jQuery
<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto"></div>
<div id="buttonsContainer" style="height:20px;max-width:400px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="button" id="decrease" value="Decrease the Value" style="width:150px">
    <input type="button" id="restore" value="Restore" style="width:150px">
</div>
$(function () {
    $("#linearGaugeContainer").dxLinearGauge({
        rangeContainer: { backgroundColor: 'coral' },
        valueIndicator: { color: 'palegoldenrod' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        value: 100
    });
	
    $('#decrease').click(function () {
        var gauge = $("#linearGaugeContainer").dxLinearGauge("instance");
        var previousValue = gauge.option('value');
        gauge.value(previousValue - 10);
    });

    $('#restore').click(function () {
        var gauge = $("#linearGaugeContainer").dxLinearGauge("instance");
        gauge.value(100);
    });
});

valueIndicator

Specifies the appearance options of the value indicator.

Type: Object

The value indicator is a pointer which designates the main value of the gauge. There are four types of value indicators in the dxLinearGauge widget: rectangle, circle, rhombus and rangeBar. Different options of the valueIndicator configuration object can be used for each type. Refer to the type option description for information on the available options by type.

Show Example:
jQuery

In this example, the gauge value is indicated by a circle. The appearance of this circle is customized using the color and length options.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: {
            type: 'circle',
            color: 'palegreen',
            length: 25
        },
        value: 89
    })
})