Configuration title

Specifies a title for a gauge.

Type: Object|String

Use this option to set a text for the gauge title. If you need to specify only a text for the title, assign this text directly to the title field. Otherwise, assign an object with the required title options specified to the title option. When title is not specified, the widget is displayed without a title.

Show Example:
jQuery

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

<div id="barGaugeContainer" style="height:400px;max-width:500px;margin:0px auto"></div>
$(function () {
    $("#barGaugeContainer").dxBarGauge({
        startValue: 0,
        endValue: 200,
        values: [121.4, 135.4, 110.9, 141.1, 127.5],
        palette: 'Bright',
        title: 'Average Speed by Racer, km/h'
    });
});

font

Specifies font options for the title.

Type: Object

Show Example:
jQuery

In this example, several font options of the title text are changed.

<div id="barGaugeContainer" style="height:400px;max-width:500px;margin:0px auto"></div>
$(function () {
    $("#barGaugeContainer").dxBarGauge({
        startValue: 0,
        endValue: 200,
        values: [121.4, 135.4, 110.9, 141.1, 127.5],
        palette: 'Bright',
        title: {
            text: 'Average Speed by Racer, km/h',
            font: {
                color: 'forestgreen',
                size: 23,
                family: 'Helvetica Neue',
                weight: 200
            }
        }
    });
});

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="barGaugeContainer" 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 () {
    $("#barGaugeContainer").dxBarGauge({
        startValue: 0,
        endValue: 200,
        values: [121.4, 135.4, 110.9, 141.1, 127.5],
        palette: 'Ocean',
        title: 'Average Speed by Racer, km/h'
    });

    $('#dropdownListSelector').change(function () {
        var gauge = $('#barGaugeContainer').dxBarGauge('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="barGaugeContainer" style="height:400px;max-width:500px;margin:0px auto"></div>
$(function () {
    $("#barGaugeContainer").dxBarGauge({
        startValue: 0,
        endValue: 200,
        values: [121.4, 135.4, 110.9, 141.1, 127.5],
        palette: 'Bright',
        title: {
            text: 'Average Speed by Racer, km/h'
        }
    });
});