All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery CircularGauge - TextCloud

An object that defines a gauge indicator of the textCloud type.

Type:

Object

jQuery
JavaScript
HTML
$(function() {
    $("#circularGaugeContainer").dxCircularGauge({
        value: 40,
        valueIndicator: { // or subvalueIndicator
            type: "textCloud",
            // ...
            // The rest of the indicator options go here
            // ...
        }
    });
});
<div id="circularGaugeContainer"></div>
Angular
HTML
TypeScript
<dx-circular-gauge [value]="40">
    <dxo-value-indicator <!-- or dxo-subvalue-indicator -->
        type="textCloud"
        <!-- ... -->
        <!-- The rest of the indicator options go here -->
        <!-- ... -->>
    </dxo-value-indicator>
</dx-circular-gauge>
import { DxCircularGaugeModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxCircularGaugeModule
    ],
    // ...
})
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().CircularGauge()
    .ID("circularGauge")
    .Value(40)
    .ValueIndicator(vi => vi // or .SubvalueIndicator
        .Type(GaugeIndicatorType.TextCloud)
        // ...
        // The rest of the indicator options go here
        // ...
    )
)

View Demo

arrowLength

Specifies the length of an arrow for the indicator of the textCloud type in pixels.

Type:

Number

Default Value: 5

color

Specifies a color of the indicator.

Type:

String

Default Value: '#679EC5'

offset

Specifies the distance between the indicator and the invisible scale line.

Type:

Number

Default Value: -6

palette

Sets the palette to be used to colorize indicators differently.

Type:

Array<String>

|

String

Default Value: 'Material'
Accepted Values: 'Bright' | 'Harmony Light' | 'Ocean' | 'Pastel' | 'Soft' | 'Soft Pastel' | 'Vintage' | 'Violet' | 'Carmine' | 'Dark Moon' | 'Dark Violet' | 'Green Mist' | 'Soft Blue' | 'Material' | 'Office'

This option accepts either the name of a predefined palette or an array of colors. The array can include the following colors:

Use the VizPalette enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Default, SoftPastel, HarmonyLight, Pastel, Bright, Soft, Ocean, Vintage, Violet, Carmine, DarkMoon, SoftBlue, DarkViolet, and GreenMist.

text

Specifies the appearance of the text displayed in an indicator of the rangeBar type.

Type:

Object

Note that the indent option of the text configuration object must not be set to 0 if you need to show the text.