text font

Specifies font options for the text displayed by a subvalue indicator of the textCloud type.

Type: Object

Show Example:
jQuery

In this example, several font options of the subvalue indicators are changed.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'cornflowerblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        subvalueIndicator: {
            type: 'textcloud',
            color: 'powderblue',
            text: {
                font: {
                    color: 'dodgerblue',
                    family: 'Zapf-Chancery, cursive',
                    size: 10,
                    weight: 200
                }
            }
        },
        value: 87.54,
        subvalues: [45.21, 56.3, 78]
    })
})

color

Specifies a font color for the text displayed by a subvalue indicator of the textCloud type.

Type: String
Default Value: '#FFFFFF'

This option supports the following colors.

  • Hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • Predefined/Cross-browser color names
  • Predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the font color of the subvalue indicators is set to darkblue.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'cornflowerblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
    	    startValue: 0,
	        endValue: 100
        },
        subvalueIndicator: {
            type: 'textcloud',
            color: 'seashell',
            text: {
                font: {
                    color: 'darkblue'
                }
            }
        },
        value: 87.54,
        subvalues: [45.21, 56.3, 78]
    })
})

family

Specifies a font family for the text displayed by a subvalue indicator of the textCloud type.

Type: String
Default Value: "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana"

For details on acceptable values, refer to the Font family article.

Show Example:
jQuery

In this example, the font family of the subvalue indicators is changed.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'cornflowerblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        subvalueIndicator: {
            type: 'textcloud',
            text: {
                font: {
                    family: 'Zapf-Chancery, cursive'
                }
            }
        },
        value: 87.54,
        subvalues: [45.21, 56.3, 78]
    })
})

size

Specifies a font size for the text displayed by a subvalue indicator of the textCloud type.

Type: Number|String
Default Value: 18

For details on acceptable values, refer to the Font size article.

Show Example:
jQuery

In this example, the font size of the subvalue indicators is set to 10.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'cornflowerblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        subvalueIndicator: {
            type: 'textcloud',
            text: {
                font: {
                    size: 10
                }
            }
        },
        value: 87.54,
        subvalues: [45.21, 56.3, 78]
    })
})

weight

Specifies a font weight for the text displayed by a subvalue indicator of the textCloud type.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, the font weight of the subvalue indicators is set to 700.

<div id="linearGaugeContainer" style="height:150px;max-width:700px;margin:0 auto"></div>
$(function () {
    $('#linearGaugeContainer').dxLinearGauge({
        rangeContainer: { backgroundColor: 'cornflowerblue' },
        valueIndicator: { color: 'paleturquoise' },
        scale: {
            startValue: 0,
            endValue: 100
        },
        subvalueIndicator: {
            type: 'textcloud',
            color: 'powderblue',
            text: {
                font: {
                    weight: 700
                }
            }
        },
        value: 87.54,
        subvalues: [45.21, 56.3, 78]
    })
})