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

Show Example:
jQuery

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

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'deepskyblue' },
        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="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'mediumseagreen' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: {
            text: 'Fan Speed (in rpm)',
            font: {
                family: 'Zapf-Chancery, cursive',
                weight: 400,
                color: 'forestgreen',
                size: 22
            }
        }
    });
})

position

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

Use the drop-down menu to change the position of the gauge title.

<div id="circularGaugeContainer" style="height:400px;max-width:400px;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 () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'deepskyblue' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: {
            text: 'Fan Speed (in rpm)',
            position: 'top-center'
        }
    });

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

text

Specifies a text for the title.

Type: String
Default Value: undefined

If you don't need to specify title options other than text, assign the text to the title property directly.
When a text is not specified for a title, the widget is displayed without a title.

Show Example:
jQuery

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

<div id="circularGaugeContainer" style="height:400px;max-width:400px;margin:0px auto"></div>
$(function () {
    $('#circularGaugeContainer').dxCircularGauge({
        rangeContainer: { backgroundColor: 'deepskyblue' },
        scale: {
            startValue: 0,
            endValue: 1000
        },
        value: 750,
        title: {
            text: 'Fan Speed (in rpm)'
        }
    });
})