Configuration subtitle

Specifies a subtitle for a gauge.

Type: Object|String

This option specifies the appearance of the gauge subtitle (the text below the title). If you need to specify only the subtitle text, assign it directly to the subtitle field. Otherwise, assign an object with the required subtitle options specified to the subtitle option. When a subtitle is not specified, the widget is displayed without it.

Show Example:
jQuery

In this example, the subtitle text is assigned directly to the subtitle 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: 'Violet',
        title: 'Average Speed by Racer',
        subtitle: '(estimated in km/h)'
    });
});

font

Specifies font options for the subtitle.

Type: Object

Show Example:
jQuery

In this example, several font options of the subtitle 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: 'Pastel',
        title: 'Average Speed by Racer',
        subtitle: {
            text: '(estimated in km/h)',
            font: {
                color: 'darkgray',
                family: 'Segoe UI',
                size: 11,
                weight: 100
            }
        }
    });
});

text

Specifies a text for the subtitle.

Type: String
Default Value: undefined

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

Show Example:
jQuery

In this example, the subtitle text is assigned to the text field of the subtitle 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: 'Vintage',
        title: 'Average Speed by Racer',
        subtitle: {
            text: '(estimated in km/h)'
        }
    });
});