Configuration 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, specify the subtitle configuration option.

View Demo

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)'
    });
})

font

Specifies font options for the title.

Type: Object

Show Example:
jQuery

In this example, the title font options are changed.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: {
            text: 'Fan Speed (in rpm)',
            font: {
                family: 'Zapf-Chancery, cursive',
                weight: 400,
                color: 'forestgreen',
                size: 22
            }
        }
    });
})

horizontalAlignment

Specifies the gauge title's horizontal position.

Type: String
Default Value: 'center'
Accepted Values: 'center' | 'left' | 'right'

To set the title's vertical position, use the verticalAlignment option.

margin

Specifies the distance between the title and surrounding gauge elements in pixels.

Type: Number|Object
Default Value: 0

Use the fields of the margin object to set the required values for the left, right, top and bottom title margins separately. If you require title margins to be equal, assign a numeric value to the margin option.

placeholderSize

Specifies the height of the space reserved for the title.

Type: Number
Default Value: undefined

position

Deprecated

Use the horizontalAlignment and verticalAlignment options instead.

Specifies a title's position on the gauge.

Type: String
Default Value: 'top-center'
Accepted Values: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'

Show Example:
jQuery
<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0px auto"></div>
<div id="selectContainer" style="height:20px;width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Title <b>position</b>:
    <select id="dropdownListSelector">
        <option value="top-center">top-center</option>
        <option value="top-left">top-left</option>
        <option value="top-right">top-right</option>
        <option value="bottom-center">bottom-center</option>
        <option value="bottom-left">bottom-left</option>
        <option value="bottom-right">bottom-right</option>
    </select>
</div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'deepskyblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: {
            text: 'Fan Speed (in rpm)',
            position: 'top-center'
        }
    });

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

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.

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: {
            text: 'Fan Speed',
            subtitle: '(in rotations per minute)'
        }
    });
})

text

Specifies text for the title.

Type: String
Default Value: undefined

Show Example:
jQuery

In this example, the title text is assigned to the text field of the title configuration object.

<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: {
            text: 'Fan Speed (in rpm)'
        }
    });
})

verticalAlignment

Specifies the gauge title's position in the vertical direction.

Type: String
Default Value: 'top'
Accepted Values: 'top' | 'bottom'

To set the title's position in the horizontal direction, use the horizontalAlignment option.